IE 11 delay in touch events (3 seconds)

Question

The code below is a very simple version of what I'm trying to do. I'm trying to trigger a looping function while an element is pressed. This is for use on a touchscreen, so in production I'm actually using hammer.js to unify the touch listeners. This oddity happens in IE 11. The actual pointer events dont fire until after the contextmenu 'circle' (the little browser animation that shows that you're holding a finger down on the browser) has completed its attempt at opening the context menu.

If pressed and released quickly then both the pointerdown and pointerup events are fired in succession along with a single loop.

This only happens in IE 11, chrome behaves as I'd expect. This also happens with mouse events (and a finger touching the screen, not a mouse) and it happens with hammer.js touch and release events.

Not surprisingly, if the "finger" moves while held down the script will work as expected and the context menu 'circle' will not try to open.

var timer;

$('.pan-button').on('touchstart pointerdown',down).on('touchend pointerup',up);

function down(e){
        console.log(e.type);
        $(this).attr('oncontextmenu', 'return false');
        var self = this;
        this.loop = function(){
            console.log('loop');
            timer = setTimeout(function(){self.loop();},100);
        }
        this.loop();
    }

function up(e){
        console.log(e.type);
        clearTimeout(timer);
    }

I should clarify that this only happens in Windows 7. Windows 8 behaves as I would expect. Same version of IE 11.0.9600. I have also tried e.stopPropagation() and tried to trigger a mousemove on both the element and the body thinking that might fake out the browser into thinking that the finger had moved.

I know this seems like an edge case but unfortunately I'm somewhat stuck needing to have the project work in this particular OS/browser combination.

IE 11 delay in touch events (3 seconds)

0 Answers0