触摸结束事件在 Chrome 中无法正常工作答案

【问题标题】：Touch end event not working properly in chrome触摸结束事件在 Chrome 中无法正常工作
【发布时间】：2016-09-01 09:24:38
【问题描述】：

这是我的代码，

<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/

【问题讨论】：

标签： javascript jquery google-chrome events touch

【解决方案1】：

根据文档：

“事件的目标是接收到与触摸点对应的 touchstart 事件的同一元素，即使触摸点已移出该元素。”

您还可以查看 touchend 的文档：

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

这意味着，如果您触摸红色框并拖动到蓝色框，则会触发红色框事件。为了避免同时发生冲突的滚动和触摸事件，我们保留了这种类型的功能。

【讨论】：