How can I disable clicking while utilizing pointer events in Internet Explorer 11?

Currently, I am working on a JavaScript application that needs to be compatible with both IE11 and Edge browsers. While testing in IE11, I observed the event chain (referenced from ) as follows:

pointerover > mouseover > pointerenter > mouseenter > pointerdown > mousedown > (pointermove > mousemove)+ > pointerup > mouseup > (lostpointercapture) > pointerout > mouseout > pointerleave > mouseleave > focus > click

The application is already set up to handle both mouse and touch events. To prevent conflicts, I use preventDefault() on all pointer events to cancel out corresponding mouse events. However, even after this handling, the click event still causes issues. Is there any native method to disable the firing of the click event at the end of the event chain?

javascriptinternet-explorer-11pointer-events

Answer №1

When implementing jQuery Pointer Events Polyfill (https://github.com/jquery/PEP) to enable the "pointerup" event on Webkit browsers, I encountered a similar issue that involved preventing a link from being followed.

To tackle this problem, I devised a solution by attaching a "click" event listener immediately after the "pointerup" event was triggered. Subsequently, I prevented the default action of the "click" event and removed its listener accordingly. Here's how it was accomplished:

var myLink = document.getElementsByClassName("myLink")[0];

myLink.addEventListener("pointerup", handleLinkPress);

function handleLinkPress(evt) {
    // perform desired actions here...

    evt.target.addEventListener("click", unfollowLink);

    function unfollowLink(evt) {
        evt.preventDefault();
        evt.target.removeEventListener("click", unfollowLink);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering the wonders of React and Javascript through the powerful Map function

I've exhausted all my knowledge of map functions and syntax, but I keep encountering the error TypeError: Cannot read property 'action' of undefined. This issue seems to stem from this line: constructor(data=[]). Typically, I am only familia ...

javascriptreactjsgraphql-jsmap-function

Table header sticking does not work when overflow is set to scroll or auto

After trying numerous solutions without success, I am reposting this question. My table has a horizontal scroll and I attempted to make the table header sticky using position:sticky, but it caused the scrolling functionality to stop working. Is there a wa ...

javascripthtmlcssangularbootstrap-4

Combine an empty array in JavaScript with the existing array to eliminate the current items

Is there a more effective way to merge arrays and update state based on the array received from the server? The array may be empty, which would result in removing all values from the state individually. My objective is to update a new state depending on t ...

javascriptreactjstypescriptredux

Chatting with a Discord bot

I am currently working on a Discord bot that will execute specific functions based on the questions asked, most of which are yes or no queries. Upon responding with "yes," a particular function should be performed, while answering "no" would terminate t ...

javascriptnode.jsdiscord.js

The .ajaxSubmit function in jquery.form.js seems to be malfunctioning when using the data option

I'm currently working with the jQuery plugin jquery.form.js and I'm looking to programmatically submit a form while including a file. Although I've set up the code and options to work with $.ajax, it's not functioning with .ajaxSubmit. ...

javascriptjqueryajaxforms

Customize React Hook Form version 7 by incorporating a unique input method for handling empty values

Introducing my custom Input component: export type InputProps = { error?: string } & InputHTMLAttributes<HTMLInputElement> export const Input: FunctionComponent<InputProps> = ({ error, ...props }) => ( <input {...props} /> ) ...

javascriptreactjstypescriptnext.jsreact-hook-form

Implementing two background images and dynamically adjusting their transparency

With the challenge of loading two fixed body background-images, both set to cover, I encountered a dilemma. The text on the page was extending below and scrolling, along with top and bottom navigation icons. As expected, the second background covered the f ...

javascripthtmlcss

What is causing the table to not be displayed in this Javascript program when it is used in a

I am currently experimenting with incorporating an infinite loop before the prodNum and quantity prompts to consistently accept user input and display the output in a table. Although the program is functional when executed, it fails to showcase the table ...

javascripthtml

Leverage zone.js in node.js environment without Angular framework

I am trying to implement zone.js in my Node application. Despite finding a post that explains how to do it, I keep encountering the 'zone is not defined' error. For instance, I came across an example like this: let zone = require('zone&ap ...

javascriptnode.jsangularzone.js

Exploring Angular's Dependency Injection

How can I verify that a module has properly loaded its required dependencies? I've added ngAnimate to the module definition, but it doesn't appear to be functioning within the application when it runs. The environment I'm navigating is quite ...

javascriptangularjsdependency-injection

Unable to invoke functions in the child window

In my Vue page, I have a script that opens a child window using the code snippet below: this.presentation = window.open( this.$router.resolve({name:'presentation'}).href, 'child window', 'width=auto,height=auto' ) ...

javascriptvue.jsvuejs2vue-router

Using Typescript to remove an element from an array inside another array

I've encountered an issue while trying to remove a specific item from a nested array of items within another array. Below is the code snippet: removeFromOldFeatureGroup() { for( let i= this.featureGroups.length-1; i>=0; i--) { if( this.featureGr ...

javascriptarraystypescriptmultidimensional-array

"Is it possible to create a loop function in JavaScript

Could someone please guide me on how to incorporate an endless loop or a consistent repetition into this section of my JavaScript code? <script> $(".modcontentnewestmore").hide(); $('.morebutton').click(function () { if ($('.modco ...

javascriptjquery

Skipping certain key-value pairs during the conversion from JSON to Excel Worksheet using the XLSX library in JavaScript

I have a set of objects in JSON format within my JavaScript code and I am looking to transform this data into an Excel worksheet. Within the JSON structure, there are certain key-value pairs that I do not wish to include in the Excel output. For instance, ...

javascriptjsonexcelxlsxworksheet

Challenges with Scaling HTML5 Video onto Canvas

Attempting to extract a frame from an html5 video to generate a thumbnail, but encountering peculiar outcomes when the image is rendered onto canvas. The issue lies in the fact that the canvas displays only a greatly magnified portion of the video! Refer ...

javascriptjqueryhtml5-canvashtml5-video

Passing the value of the selected calendar date to the controller

How can I pass the value generated by this calendar_date_select to the controller? Any suggestions on how to modify the onchange code? <%= calendar_date_select_tag "meeting_date_1", @time, :embedded => true, :time => true, :minut ...

javascriptruby-on-railsajaxcalendar

The number of characters can be measured in a div element that is editable

Looking to create a character counter similar to Twitter in a contenteditable div. The goal is to restrict users to typing a maximum of 140 characters. Using jQuery for character count and remaining display, but encountering an issue where the Enter key ( ...

javascriptjqueryhtmlcss

What is the process for setting up a particle system to resemble a spherical cap?

For my Three.js project, I am working on creating a snowfall with particles inside a snowball made of sphereGeometry - a traditional Christmas snowball. The particles have been generated using THREE.BufferGeometry(), and each has been assigned an initial p ...

javascriptthree.js

Is it possible for web browsers to set a timeout on an XmlHttpRequest while it is still active?

When dealing with asynchronous XMLHttpRequests that take a long time to retrieve data from the server, I am searching for a way to abort them. Setting a timeout before sending the XHR is not feasible due to the length of these requests. Although calling X ...

javascriptajaxxmlhttprequesttimeoutabort

Finding the Client's Private IP Address in React or Node.js: A Comprehensive Guide

Issue I am currently facing the challenge of comparing the user's private IP with the certificate's IP. Is there a method available to retrieve the user's private IP in react or node? Attempted Solution After attempting to find the user&a ...

javascriptnode.jsreactjsip