Pointer Events IE11/ Surface

Question

What is the best way to handle touch/pointer events on a surface tablet? I find its behavior quite confusing. I wrote a script that just set all the event handlers to figure out how the events are fired (setting native event handlers, using jQuery for the UI):

$.each([
    "touchstart","touchmove","touchend",
    "mousedown","mousemove","mouseup",
    "pointerdown","pointermove","pointerup",
    "MSPointerDown","MSPointerMove","MSPointerUp"
], function(i,eventname) {

    tester.addEventListener(this, function(e) {
        msg(eventname,e);
        if ($("#prevent").is(":checked")) {
            e.preventDefault();
        }
        if ($("#stop").is(":checked")) {
            e.stopPropagation();
        }
        if ($("#stopimmediate").is(":checked")) {
            e.stopImmediatePropagation();
        }

    }, false);
});

Using the mousepad or desktop IE11, everything is fine. All three events (mouse, pointer, MSPointer) are fired in the expected order: down, move, up.

But, when I use the tochscreen

at first a pointermove fires, then pointer down. On the screen a rectangle appears around my finger.
repeated move events are firing while not moving my finger
firing no further events when I move my finger
pointerend event when removing finger

What am I doing wrong? Calling preventDefault, stopPropagation or stopImmediatePropagation does not change this behavior. Setting the css pointer-events: none; disables all events.

Complete script on codepen

score 1 · Answer 1 · answered Oct 08 '14 at 22:17

1

You need to use the touch-action CSS property to prevent the browser's pan and zoom behaviours when the user drags accross the screen with a finger or stylus.

For example:

#prevent, #stop, #stopimmediate {
    touch-action: none;
}

answered Oct 08 '14 at 22:17

taye

281
2
6

Hum, this simply disables all events. Not what I want. – Joschi Oct 10 '14 at 10:54

score 0 · Answer 2 · answered Oct 07 '14 at 20:45

Try my touch gesture abstraction library, DeepTissue. IE's touch model is extremely simply because the pointer events abstract all the input modalities into a common API. Chrome is making things complicated, but that is another story :).

You really do not want to hook into all the events. I get that it would be confusing. That is why I wrote Deeptissue. It keeps you from having to write all the plumbing code and it chooses the best option and hooks into that event set.

give me any feedback you have! – Chris Love Oct 10 '14 at 15:42 — Chris Love, Oct 10 '14 at 15:42

Pointer Events IE11/ Surface

2 Answers2