convert touch event to mouse events only works every second time

Question

I am using the following script, to convert touch events to mouse events. It works pretty fine, however between two touch events (for example with panning through data of a diagram) the second event is not triggered. Then the next event is triggered, the next not and so on.

So this is my function to so found here

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup";   break;
        default:           return;
    }

    // initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //                screenX, screenY, clientX, clientY, ctrlKey, 
    //                altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                  first.screenX, first.screenY, 
                                  first.clientX, first.clientY, false, 
                                  false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() 
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
}

Anyone knows why this behaviour is like that?

UPDATE: I found out, that the 'first.target' is first 'div.dragcover' and in the second try it'is 'rect' then again 'div.dragcover' and so on. Anyone knows why this is so?

You don't seem to be converting the touchcancel event into a mouseevent. Is that intentional? — Mark Chorley, Apr 26 '16 at 16:07
I do not really need a touchcancel event & I do not know which mouse event I should bind to it, any ideas? — threxx, Apr 26 '16 at 16:10
initMouseEvent is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent better use new MouseEvent(...) — Bruno Marotta, Apr 01 '20 at 07:45

score 0 · Answer 1 · answered Apr 26 '16 at 17:47

0

Sounds almost like there is a problem with the markup. The target should always be the element the finger actually touched.

answered Apr 26 '16 at 17:47

meditari

131
2
7

so why is it the same every first touch, then a different one, then again the same then again the different one? – threxx Apr 26 '16 at 18:04
1

Perhaps this might help? `document.elementFromPoint(event.clientX, event.clientY);` http://stackoverflow.com/questions/3918842/how-to-find-out-the-actual-event-target-of-touchmove-javascript-event – meditari Apr 26 '16 at 18:18

convert touch event to mouse events only works every second time

1 Answers1