javascript - Handling iPad touch events for draggablesdroppables (undefined changedTouches) - Stack Overflow

admin管理员组

文章数量:1328623

I am trying to get jQuery drag/drop to work nicely with iPad touch events. I found this code on the internet:

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

It appears to work fine if I attach the touchHandler to the document touchstart/move/end, but then no native zooming/scrolling on the iPad is allowed, so I am trying to just attach this handler to the draggables themselves.

The issue that I am seeing with this is that event.changeTouches is always undefined for some reason, as you can witness in / . I can't e up with a reason why a touch event will always have an undefined changeTouches property and because of it, this code won't work. Any thoughts?

I am trying to get jQuery drag/drop to work nicely with iPad touch events. I found this code on the internet:

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

It appears to work fine if I attach the touchHandler to the document touchstart/move/end, but then no native zooming/scrolling on the iPad is allowed, so I am trying to just attach this handler to the draggables themselves.

The issue that I am seeing with this is that event.changeTouches is always undefined for some reason, as you can witness in http://jsfiddle/myLj2/1/ . I can't e up with a reason why a touch event will always have an undefined changeTouches property and because of it, this code won't work. Any thoughts?

• javascript
• jquery
• jquery-ui
• touch-event

Share Improve this question Follow asked Apr 4, 2012 at 16:03 Davis DimitriovDavis Dimitriov 4,25733 gold badges3333 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I figured it out after discovering Does jQuery preserve touch events properties?.

It turns out that the jQuery event doesn't copy over the changeTouches property, so you have to either use jQuery's originalEvent property or skip jQuery all together and bind with a function like addEventListener

本文标签： javascriptHandling iPad touch events for draggablesdroppables (undefined changedTouches)Stack Overflow