如何使touchEnd像mouseUp一样表现？

Question

在mouseUp或touchEnd上，我想获取发生该事件的元素的引用。

Demo

在此示例中，您需要单击一个元素，拖动鼠标并在另一个元素上释放。释放鼠标后，该元素的背景将变为红色。我的代码对鼠标事件正常工作，但在触摸设备上不工作。

[当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，它对我来说可以在移动Safari上正常工作：http://jsfiddle.net/DREer/12/

Answer 3

也许您可以在程序中包含jQuery，您可以执行以下操作：

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

我不确定jQuery是否开箱即用，但是您可以随时尝试使用jQuery movil，希望对您有所帮助