如何让touchEnd像mouseUp一样？

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链接).这是CSSOM规范提供给我们的那些金色但相当未知的方法之一.

这是小提琴.