Question

在mouseUp或touchEnd我希望获得该事件发生的元素的引用。

在此示例中，您需要单击一个元素，拖动鼠标并释放另一个元素。释放鼠标时，该元素的背景将变为红色。我的代码适用于鼠标事件，但不适用于触控设备。

当touchStart在一个元素上并且手指在另一个元素上释放时，我只获得对第一个元素的引用。

我需要更改哪些内容才能使触摸事件与鼠标事件完全相同？

var isMouseDown = false;    


var panel1 = document.getElementById( 'panel1' );
var panel2 = document.getElementById( 'panel2' );

panel1.onmousedown = onDocumentMouseDown;
panel1.onmouseup = onDocumentMouseUp;
panel1.onmousemove = onDocumentMouseMove;   
panel1.addEventListener( 'touchstart', onDocumentTouchStart, false );
panel1.addEventListener( 'touchmove', onDocumentTouchMove, false );
panel1.addEventListener( 'touchend', onDocumentTouchEnd, false );

panel2.onmousedown = onDocumentMouseDown;
panel2.onmouseup = onDocumentMouseUp;
panel2.onmousemove = onDocumentMouseMove;
panel2.addEventListener( 'touchstart', onDocumentTouchStart, false );
panel2.addEventListener( 'touchmove', onDocumentTouchMove, false );
panel2.addEventListener( 'touchend', onDocumentTouchEnd, false );



function onDocumentMouseDown(event) {
    event.preventDefault();
    panel1.style.background="#2E442E";
    panel2.style.background="#5D855C";      
}

function onDocumentMouseUp(event) {
    event.preventDefault();
    this.style.background="#ff0000";
}

function onDocumentMouseMove( event ) {

}   

function onDocumentTouchStart( event ) {
    event.preventDefault();
    panel1.style.background="#2E442E";
    panel2.style.background="#5D855C";

}

function onDocumentTouchMove( event ) {     

}

function onDocumentTouchEnd( event ) {
    event.preventDefault();         
    this.style.background="#ff0000";        

}

Answer 1

这是一个有趣的问题需要解决。感谢那。这就是我所做的。我已经修改了你的touchmove处理程序：

   function onDocumentTouchMove(event) {
    onDocumentTouchMove.x = event.changedTouches[event.changedTouches.length - 1].clientX;
    onDocumentTouchMove.y = event.changedTouches[event.changedTouches.length - 1].clientY;
}

在这个处理程序中，我正在保存用户移动到的最后一个坐标。很可能，这是用户将他的手指，鼻子，指关节，触笔等从触摸表面上取下的点。然后我在touchend的处理程序中使用这些坐标来查找它们周围的元素。

    function onDocumentTouchEnd(event) {
    event.preventDefault();
    var elem = document.elementFromPoint(onDocumentTouchMove.x, onDocumentTouchMove.y);
    elem.style.background = "#ff0000";
}

我已将document.elementFromPoint (mdn link)用于此目的。它是CSSOM spec提供给我们的那些金色但相当不为人知的方法之一。

这是fiddle。

Answer 2

从看起来，这是触摸事件的预期行为。但是，我有一个解决方法！

我没有对此进行过广泛的测试，但它似乎适用于至少touchStart和touchEnd事件的移动版Safari。

基本上我们要做的是捕获文档中处于捕获阶段的所有触摸事件（请参阅http://www.w3.org/TR/DOM-Level-3-Events/）。这些事件的处理程序将在此位置找到DOM元素，并使用“正确”目标重新发送事件。

似乎touchEnd事件的位置没有明确定义，所以我不得不查询changedEvents数组以获得最后触及的位置。我不确定这是否适用于touchMove事件等。

function rerouteTouch (evt) {
    if (evt.passthrough) { // Ignore if already rerouted
        return;
    }
    evt.stopPropagation();
    var newevt = document.createEvent('TouchEvent');
    newevt.initTouchEvent (
        evt.type,
        evt.bubbles,
        evt.cancelable,
        evt.view,
        evt.detail,
        evt.screenX,
        evt.screenY,
        evt.clientX,
        evt.clientY,
        evt.ctrlKey,
        evt.altKey,
        evt.shiftKey,
        evt.metaKey,
        evt.touches,
        evt.targetTouches,
        evt.changedTouches,
        evt.scale,
        evt.rotation);
    newevt.passthrough = true; // Only reroute once

    var target;
    var x = (evt.type === 'touchend') ? evt.changedTouches[0].pageX : evt.pageX;
    var y = (evt.type === 'touchend') ? evt.changedTouches[0].pageY : evt.pageY;

    if (document !== (target = document.elementFromPoint(x, y))) {
        target.dispatchEvent(newevt);
    }
}

document.addEventListener( 'touchstart', rerouteTouch, true); // Third arg is true to indicate capture-phase
document.addEventListener( 'touchend', rerouteTouch, true); 

...

// Your event handlers here

这是一个jsfiddle，对我来说可以按照预期在移动游猎中运行：http://jsfiddle.net/DREer/12/

Answer 3

也许如果你可以在你的程序中包含jQuery，你可以这样做：

$('#itemId').on('touchEnd',function(){ this.trigger('mouseUp') });

我不确定开箱即用的jQuery是否支持此事件，但您可以随时尝试jQuery movil，希望它有所帮助

如何让touchEnd像mouseUp一样？

3 个答案: