10

I'm developing a JavaScript application that has to run on both IE11 and Edge. In IE11, the event chain I'm seeing (copied from https://patrickhlauke.github.io/touch/tests/results/) is the following:

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

The app is already wired up to handle mouse and touch events, so I call preventDefault() on all of the pointer events to cancel the corresponding mouse event. Unfortunately, the click comes through at the end and is causing problems. Is there any built in way to disable the click event from firing at the end?

sean christe
  • 879
  • 2
  • 7
  • 24
  • 2
    try adding `pointer-events:none` – maioman Nov 10 '15 at 21:12
  • Adding pointer-events: none seems to disable everything. I'm not sure if that's what's supposed to happen, but unfortunately I need the pointer events (we polyfilled them and treat them as touch events in our widgets). I need to keep the pointers, but ignore the click at the end of the chain. – sean christe Nov 10 '15 at 21:27

1 Answers1

1

I'm using jQuery Pointer Events Polyfill (https://github.com/jquery/PEP) to use the "pointerup" event on Webkit browsers and I ran into a similar problem. In my case, I had to prevent a link from being followed.

I resolved the problem by adding a "click" event listener right after "pointerup" was triggered, then preventing the "click" event and removing its listener. Like this:

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

myLink.addEventListener("pointerup", handleLinkPress);

function handleLinkPress(evt) {
    // do something here...

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

    function unfollowLink(evt) {
        evt.preventDefault();
        evt.target.removeEventListener("click", unfollowLink);
    }
}
Leonardo Favre
  • 308
  • 2
  • 6
  • I had a similar problem when using a webkit browser for an element which could be dragged and/or clicked. I solved it by temporarily adding a "click" event listener for the capturing phase(!) after dragging in order to catch the unwanted "click" event before the regular handler could get called. – Andreas Rozek Nov 10 '22 at 14:56