Question

我尝试了最近的jquery方式，以检查点击是否在元素之外：

result.group(2)

但是，如果我点击$(document).click(function(event) { if(!$(event.target).closest("#wrapper").length) { console.log($(event.target)) console.log("click outside of #wrapper"); } }); $("#remove-me").click(function(){ $(this).remove(); console.log("remove me clicked"); }); $("#click-me").click(function(){ console.log("click clicked"); }); <div id="wrapper"> <div id="remove-me">click me to remove from dom</div> <div id="click-me">click me</div> </div>，#remove-me会从DOM中移除 - 它现在在空间的某个地方 - 而且它找不到任何div。令人惊讶的是closest()监听器仍然获得点击和元素，虽然它不再在DOM中了...

如果这个document在我的包装内，我将如何正确找到方法。这是一个jQuery问题还是有纯粹的Javascript方式？为什么div侦听器仍会触发已删除的元素？

我发现了一种检查$(document).click()是否没有div ...

的方法

Codepen示例：http://codepen.io/urtopal/pen/BLJgrQ

概要/问题：

为什么仍然会触发已删除元素上的侦听器（如果单击parent()，则不应执行“在#wrapper外部单击”上面的示例）？
如何解决这个问题？完全没有触发器或者如何检查是否被移除？

Answer 1

试试这个：

$(document).click(function(event) { 
  if($(event.target).prop("tagName").toLowerCase() == "html") {
    console.log("click outside of #wrapper");
  }
});
                  
$("#remove-me").click(function(){
  $(this).remove();
  console.log("remove me clicked");
});

$("#click-me").click(function(){
  console.log("click clicked");
});

#wrapper {
  background-color: #ccc;
  padding: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="remove-me">click me to remove from dom</div>
  <div id="click-me">click me</div>
</div>

Answer 2

尝试在return false;处理程序的末尾'click'，它将阻止事件冒泡DOM，并阻止其他绑定处理程序执行：

$("#remove-me").click(function(){
  $(this).remove();
  console.log("remove me clicked");
  return false;
});

检查点击是否在元素之外 - 在删除的项目上

2 个答案: