gpt4 book ai didi

动态显示元素上的 JavaScript touchend 不会触发

转载 作者:行者123 更新时间:2023-11-27 23:08:50 25 4
gpt4 key购买 nike

我注意到触摸事件中有一个奇怪的行为。情况是这样的:我有一个#pointercapture div,默认情况下是隐藏的。 touchstart 处理程序附加到主体,这会导致 pointercapture 显示(覆盖主体)。 pointercapture 附加了 touchend 事件,该事件将其隐藏。问题是,在 touchstartpointercapture 上出现,而在 touchend 上它没有隐藏。您必须再次触摸屏幕并松开才能使其消失。这是 fiddle 。我还附加了鼠标事件,其按预期工作(pointercapture 隐藏在第一个 mouseup 上)。 https://jsfiddle.net/3p8eyug5/

HTML

<body>
<div id="pointercapture"></div>
</body>

CSS

body {
width:500px;
height:500px;
background:green;
}
#pointercapture {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:orange;
}

JavaScript

  var $=jQuery;
$('body').on('touchstart mousedown', function(e) {
$('#pointercapture').show();
e.preventDefault();
});

$('#pointercapture').on('touchend mouseup', function(e) {
$(this).hide();
e.preventDefault();
});

有人可以解释一下这种行为吗?我也很好奇它如何与指针事件和触摸一起工作,我现在无法检查它。

最佳答案

这是预期的行为。一旦主体捕获到 touchstart 事件,它就会通过 touchend 保存整个触摸 Action (触摸事件出现时不会传输到 #pointercapture)。您只需将 touchend 事件放在 body 上而不是 #pointercapture 上,它就应该按照您所描述的那样工作。

$('body').on('touchstart mousedown', function(e) {
$('#pointercapture').show();
e.preventDefault();
});

$('body').on('touchend mouseup', function(e) {
$('#pointercapture').hide(); // also change this to #pointercapture
e.preventDefault();
});

https://jsfiddle.net/3p8eyug5/1/

关于动态显示元素上的 JavaScript touchend 不会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36361492/

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