On Windows Phone's IE Touchstart Event Ends Automatically After Few Seconds

Question

I have a very specific problem. I'm writing a web-page for mobile phones which has a button on it. I'm detecting touchevent on every browser including IE, but on IE it's quite specific. After a few seconds it automatically ends. Can you somehow help me? Here is my code (modified one, but still not working properly):

if (window.navigator.pointerEnabled) {
    tapButton.addEventListener("pointerup", function(e) {
        e.preventDefault();
        addClass(this, 'clicked');
        buttonTouched = true;
    }, false);
    tapButton.addEventListener("pointerdown", function(e) {
        e.preventDefault();
        removeClass(this, 'clicked');
        buttonTouched = false;
    }, false);
    alert("pointerEnabled");
}
else if (window.navigator.msPointerEnabled) {
    tapButton.addEventListener("MSPointerDown", function(e) {
        e.preventDefault();
        addClass(this, 'clicked');
        buttonTouched = true;
    }, false);
    tapButton.addEventListener("MSPointerUp", function(e) {
        e.preventDefault();
        removeClass(this, 'clicked');
        buttonTouched = false;
    }, false);
    alert("mspointerEnabled");
}
else {
    alert("ordinary touch");
    tapButton.addEventListener('touchstart', function(e) {
        e.preventDefault();
        addClass(this, 'clicked');
        buttonTouched = true;
    }, false);
    tapButton.addEventListener('touchend', function(e) {
        e.preventDefault();
        removeClass(this, 'clicked');
        buttonTouched = false;
    }, false);
}

And the html tag has in it:

-ms-touch-action: none !important;
touch-action: none !important;

but that does not help either.

You didn't say which version of IE you're seeing this one, but I see that you're detecting the vendor prefixed events before the non-prefixed events. Per https://msdn.microsoft.com/en-us/library/windows/apps/dn263112.aspx#document_object_model__dom__improvements, the prefixed versions are deprecated and should only be used when the non-prefixed versions are not available. Perhaps reordering things will help. The prefixed versions will, at some point, no longer work at all. — Lance Leonard, Jun 04 '15 at 18:26
I was trying to fix the problem with vendor prefixes but it didn't help :( I only had the one without prefixes and it was acting the same :( any other suggestions? — gogachinchaladze, Jun 04 '15 at 19:09
Add working code snippet please, can't understand your problem. — sergdenisov, Jun 12 '15 at 18:18
Please see live project I made http://sheav.se/en and you will see everything. I cannot make snipped as it's very specific case — gogachinchaladze, Jun 14 '15 at 08:31
This problem appears only for IE 10 mobile. `pointerup` always fire for static gesture event - touch and hold. I tried to prevent it, but it fire always. — Alex, Jun 15 '15 at 15:41
Yeap, I also tried to somehow prevent it but nothing worked :( — gogachinchaladze, Jun 16 '15 at 08:01
On a Win**8** phone, after showing the button for about 1 second, I have this message `Sorry, you cannot pou beer from your smartphone` how can I debug this? — Cliff Burton, Jun 16 '15 at 08:56
That means your smartphone does not support window.ondevicemotion or has no gyroscope — gogachinchaladze, Jun 16 '15 at 13:33
I'm sorry but I think you have some background problem, cause my phone has a working gyroscope and supports `window.ondevicemotion`. Connecting the phone from the page opened in Chrome gives me the same message but the beer mug is moving when tilting the phone (in IE no). — Cliff Burton, Jun 19 '15 at 12:07
I have a strong suspicion that this is a hardware issue, i.e. some phones are just too quick to fire `pointerup`. In my own testing, I have found that if I use my entire thick thumb to firmly press the button, the erratic `pointerup` never fires. But if I use a thin fingertip or fingernail, the `pointerup` fires after ~0.5s to 1.5s, possibly because the phone was too quick to trigger a "finger release". — light, Jul 10 '15 at 16:58

Stijn de Witt · Answer 1 · 2015-07-22T23:50:44.043

I suspect you are running into a multi-touch issue...

Remember, touch events are not the same as mouse events. You can touch with more than one finger. What happens if you touch with one finger than add a second finger? You get two consecutive touchstart events. The same is probably true for touchend. I suspect user light is right that it's probably triggering a finger release incorrectly...

Please have a look at what is happening to the touches, changedTouches and targetTouches properties of the TouchEvent you get in your listener. I strongly suspect you'll see that there still is a 'finger' left touching... So it went from 2 touches to 1...

Making sure that the (no longer) touching finger is actually the one that's on the button etc is all a lot less simple than the good old mouseup and mousedown events were.

EDIT: I realize your problem is with IE and it's pointer events... However they work mostly the same in that they too support multi-touch (and could thus suffer the same issues). I'm not seeing a property akin to touches, but I do see a pointerId, which can give you the same info (at the cost of some bookkeeping on your end).

This MSDN page has some good info. Especially this code snippet is enlightening I think:

function pointerdownHandler(evt) {
      evt.target.setPointerCapture(evt.pointerId);
}

This seems to confirm that, when a finger hits the surface, the contact point gets an ID, which is used to inform you which finger left the surface when you receive the pointerup event.

I'd add some logging that just prints the pointerId on pointerdown and pointerup and I'll bet you will quickly find your solution.

On Windows Phone's IE Touchstart Event Ends Automatically After Few Seconds

1 Answers1