动态显示元素上的JavaScript touchend不'；t火

我注意到在接触事件中有一种奇怪的行为。情况是这样的：我有一个

#pointercapture

div，默认情况下是隐藏的。一个

touchstart

处理程序连接到主体，这会导致

pointercapture

显示（覆盖主体）。

pointercapture

附加了

touchend

事件，该事件将隐藏它。问题在于，在

touchstart pointercapture

上出现，而在

touchend

上它没有隐藏。您必须再次触摸屏幕并释放，才能使其消失。 这是小提琴。我还附加了鼠标事件，它们按预期工作（

pointercapture

在第一次

mouseup

时隐藏）。

HTML

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保存整个触摸动作（触摸事件出现时不会传输到#pointercapture）。你只需要把touchend事件放在身体上，而不是指针捕捉，它应该像你描述的那样工作

$('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();
});

---

谢谢。事实上，它发生的方式对我很有用，我只是好奇它是如何工作的。你知道指针事件的情况是否相同吗？@Iron96是的。在这两种情况下，事件流都由发起人持有。

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

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

$('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();
});