event.stopPropogation()在IPAD/平板电脑中不起作用

Question

我正在使用coveo Framework，我在下拉按钮中使用了facet，我编写了一个window.onclick函数，以便在单击下拉按钮外部时，下拉按钮应该关闭。一切似乎都很正常，但是当我点击facets复选框时，下拉框关闭了，当我和coveo团队交谈时，他们说当点击coveo复选框时，查询被触发了，这就是当点击时下拉框关闭的原因。为了解决这个问题，我使用了event.stopPropogation，它在桌面模式下工作得很好，但在IPAD模式下就不行了。这里是我的代码

// Prevent event bubble up to window.
document.getElementById('dropdown').addEventListener('click', function(event) {
  event.stopImmediatePropagation();
  
});

function close() {
  document.getElementById('dropdown').classList.remove('show');
}
window.onclick = function(event) {
  if (!navigator.userAgent.match(/Android|webOS|iPhone|iPod|Blackberry/i)) {
    if ((!event.target.matches('.dropdown-backdrop')) && event.target.closest('#dropdown') === null) {
      close();
  }

 }
};

Answer 1

我认为问题出在触摸屏设备上，除了mouse events之外，你实际上还可能获得touch events。我怀疑，如果你在touchstart上附加了另一个和click做同样事情的监听器，你会在平板电脑上看到同样的结果。

理论上，您应该不会在平板电脑上看到任何单击事件(用户在没有鼠标的情况下无法单击)，但在实践中，浏览器会模拟单击事件。但是，当这些事件在中生成时。如果这两个事件都触发了，那么您就成功地阻止了click事件的传播，但没有阻止touch事件的传播。

更新

您没有提供足够的详细信息来完整地给出一个示例，但是更改发生在附加到dropdown元素的侦听器中。

// Note instead of using the same anonymous function twice,
//   I've defined a function to stop propigation
function stopProp(e) {e.stopImmediatePropagation();}
document.getElementById('dropdown').addEventListener('click',stopProp);
document.getElementById('dropdown').addEventListener('touchstart',stopProp);