Question

这是我的代码，

<body>
    <div id="first" style="background-color:red;height:90px;width:200px;">

    </div>
    <div id="second" style="background-color:blue;height:90px;width:200px;">

    </div>
    <script>
        var ele1 = document.getElementById("first"), ele2 = document.getElementById("second");

        $("#first").css('touch-action', 'none');
        $("#second").css('touch-action', 'none');

        $(ele1).bind("touchend mouseup", function (e) {
           alert("red");
        });
        $(ele2).bind("touchend mouseup", function (e) {
            alert("blue");
        })
    </script>
</body>

如果我点击（使用鼠标）红色元素并拖动到蓝色元素，则将警报框抛出为蓝色....它工作正常。在这种情况下，mouseup事件是从蓝色触发的，这是正确的

但是当我触摸红色并拖动到蓝色元素时，它会将警报框抛出为红色....在这种情况下，touchend事件是从红色元素触发的......如何解决？这是在Chrome浏览器中复制的。

演示示例：http://jsfiddle.net/ZPUr4/436/

Answer 1

根据文件：

＆＃34;事件的目标是接收与触摸点相对应的触摸启动事件的相同元素，即使触摸点已移出该元素之外。＆＃34;

您还可以看到touchend的文档：

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

这意味着，如果您触摸红色框并拖动到蓝色框，则会触发红色框事件。为了避免同时出现滚动和触摸事件冲突，需要保留此类功能。

触摸结束事件在Chrome

1 个答案: