Question

我注意到触摸事件中有一种奇怪的行为。情况是这样的：我有一个#pointercapture div，默认是隐藏的。一个touchstart处理程序附加到正文，这会导致指针捕获显示（覆盖正文）。指针捕获附加了touchend事件，隐藏它。问题是在touchstart上出现了指针捕获，并且在touchend上它并不隐藏。您必须触摸屏并再次释放才能消失。这是小提琴。我还附加了鼠标事件，它们按预期工作（指针捕获隐藏在第一个鼠标上）。 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();
});

有人可以解释这种行为吗？我也好奇它如何使用指针事件和触摸，我现在无法检查它。

Answer 1

这是预期的行为。一旦身体捕获到touchstart事件，它就会通过touchend保持整个触摸动作（触摸事件在出现时不会转移到#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不会触发

1 个答案: