为什么 mousedown 事件摆脱了我的点击事件？

Question

我有一个问题，我在特定情况下的点击事件没有被调用。我可以在小提琴中使用这个例子更好地解释。我也粘贴了下面的代码。

<html>
    <input type="button" id="openId" value="Open" />
    <div id="qbr"></div>
</html>

$(document ).on("mousedown",function() {
  console.log("mousedown");
  $('#qbr').hide();
});

$("#openId").on("click", function() {
  console.log("open");
  $('#qbr').html("BLAH BLAH <input type=\"button\" id=\"closeId\" value=\"Close\" />");
  $('#qbr').show();
});

$(document).on('click', "#closeId", function(e){
  e.stopPropagation();
  console.log("close");
  $('#qbr').hide();
});

查看小提琴的控制台以查看我面临的问题。单击打开按钮时，您会看到文本和关闭按钮。并在控制台中打印“mousedown”和“open”。现在，当您单击关闭按钮时，您只会在控制台中看到“mousedown”。我需要它同时触发 mousedown 和关闭点击事件。这与在 mousedown 上隐藏 div 有关，但我确实需要它。（当你点击文档上的任何地方时，mousedown 可以关闭 div，想想菜单是如何工作的）。

任何帮助将不胜感激！

谢谢！

Answer 1

像下面这样更新 mousedown 事件：

$(document ).on("mousedown",function(e) {
  if(e.target.id === 'closeId'){
  return;
  }
  console.log("mousedown");
  $('#qbr').hide();
});

Answer 2

对于我的解决方案，我看到

mousedown

事件侦听器已添加到整个文档，包括

#qbr

div。为了使您的代码正常工作，您必须选择整个文档，但不包括

#qbr

，如下所示：

$("*:not(#qbr)")

然后，对于每个选定的元素，我们必须使用以下方法排除子元素的侦听器：

if (event.target !== event.currentTarget) return

这是为了确保单击

#qbr

不会触发

<body>

的侦听器或任何其他父侦听器。

通过这两项更改，代码将如下所示。

$("*:not(#qbr)").on("mousedown",function(event) {
  if (event.target !== event.currentTarget) return;
  event.stopPropagation();
  console.log("mousedown");
  $('#qbr').hide();
});

$("#openId").on("click", function() {
  console.log("open");
  $('#qbr').html("BLAH BLAH <input type=\"button\" id=\"closeId\" value=\"Close\" />");
  $('#qbr').show();
})
$(document).on('click', "#closeId", function(){
  console.log("close");
  $('#qbr').hide();
});

为什么 mousedown 事件摆脱了我的点击事件？

问题描述投票：0回答：2

2个回答

最新问题

为什么 mousedown 事件摆脱了我的点击事件？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2