gpt4 book ai didi

javascript - 触摸结束事件在 Chrome 中无法正常工作

转载 作者:行者123 更新时间:2023-12-03 06:12:18 25 4
gpt4 key购买 nike

这是我的代码,

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

最佳答案

根据文档:

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

您还可以查看touchend的文档:

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

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

关于javascript - 触摸结束事件在 Chrome 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39267655/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com