嵌套$（document）.ready（）

Question

我有一个带有单一按钮的普通网页。

使用 jQuery 3.3.1 ，此按钮将附加一个“单击”事件，这样，一旦单击此按钮，下一个将在页面上的任意位置单击（{ {1}}产生一个document。     

alert('Clicked!')

但是使用此代码，首先点击按钮本身会产生<div id="container"> <button id="Btn">Click</button> </div> <script type="text/javascript"> $(document).ready(function() { $("#Btn").click(function() { $(document).click(function() { alert("Clicked!"); $(document).unbind('click'); }); }); }); </script> 。

我稍微更改了代码，并将'click'事件附加到alert('Clicked!') 嵌套的 $(document)中：

$(document).ready()

这可以按预期工作，但是我仍然无法推断这种行为：为什么我需要包含嵌套的<script type="text/javascript"> $(document).ready(function() { $("#Btn").click(function() { $(document).ready(function() { // <--here $(document).click(function() { alert("Clicked!"); $(document).unbind('click'); }); }); }); }); </script> ？

还是有其他方法可以实现所需的功能？

Answer 1

您的第一个摘要在第一次单击按钮时生成警报的原因是事件传播，特别是event bubbling。当您单击按钮时，在执行事件处理程序后，同一事件将在DOM树中传播；最终到达文档元素，并触发您订阅的新事件处理程序。

确保事件不会立即在文档上触发的方法之一是通过调用event.stopPropagation()来阻止事件的传播。

您可以在下面的代码段中看到这一点：

$(document).ready(function() {
  $("#Btn").click(function(e) {
    e.stopPropagation();
  
    $(document).click(function() {
      alert("Clicked!");
      $(document).unbind('click');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="Btn">Click</button>
</div>