Prevent click when using pointer events in IE11?

Question

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?

Answer 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);
    }
}