Question

我有一个小Jquery Snippet，工作得非常糟糕......

这是jQuery

$(document).ready(function () {
    $("div").click(function (event) {
        alert(event.target.id);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">div1
    <div id="div2">div2
        <div id="div3">div3
            <div id="div4">div4</div>
        </div>
    </div>
</div>

问题是警报在嵌套的div上多次运行。为什么这样？

Answer 1

使用 stopPropagation ：停止冒泡

 $("div").click(function (event) {
      event.stopPropagation();
        alert(event.target.id);

    });

Answer 2

这是因为冒泡和捕获使用stopPropagation（）方法

http://javascript.info/tutorial/bubbling-and-capturing

希望它可以帮到你

element.onclick = function(event) {
   event = event || window.event // cross-browser event

   if (event.stopPropagation) {
      // W3C standard variant
      event.stopPropagation()
   } else {
      // IE variant
       event.cancelBubble = true
  }
 }

Answer 3

在该上下文中使用class

<div id="div1" class='myDiv'>div1
    <div id="div2" class='myDiv'>div2
        <div id="div3" class='myDiv'>div3
            <div id="div4" class='myDiv'>div4</div>
        </div>
    </div>
</div>

Jquery是

$(".myDiv").click(function (event) {

      event.stopPropagation();
      $(this).attr('id');

});

如何使Jquery仅在嵌套标记上运行一次

3 个答案: