14

OnmouseUp或者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";        

}
4

3 回答 3

12

这是一个有趣的问题。感谢那。这就是我所做的。我已经修改了你的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 规范提供给我们的那些黄金但相当未知的方法之一。

这是小提琴。

于 2013-03-13T12:41:40.793 回答
0

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

我没有对此进行过广泛的测试，但它似乎至少可以在移动 Safari 上touchStart运行touchEnd。

基本上我们要做的是捕获文档上的所有触摸事件，因为它们处于捕获阶段（请参阅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/

于 2013-03-12T02:25:37.820 回答
-1

也许如果您可以将 jQuery 包含到您的程序中，您可以执行以下操作：

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

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

于 2012-07-12T05:30:23.247 回答