下面是我的代码段,问题是,如果单击文本为“ test 1”的“ li”元素,则警报提示确实触发了一次(正常),但是如果单击文本为“ li”的元素在“测试2”中,警报提示触发了两次,就像两次单击事件功能一样。有什么想法,线索吗?



$(document).ready(function(){

  $(document).on("click", ".nav a", function(){

   alert("test");
  })
  $(document).on("click", ".dp a", function(){

   alert("test");
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="nav">
  <li><a href="#">test 1</a></li>
  <li><a href="#">test 1</a></li>
  <li><a href="#">test 1</a>
    <ul class="dp">
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 2</a></li>
    </ul>
  </li>
</ul>

最佳答案

使用event.stopPropagation(),它将阻止任何父事件动作



$(document).ready(function() {
  $(document).on("click", ".nav a", function() {
    alert("test");
  }).on("click", ".dp a", function(e) {
    e.stopPropogation();
    alert("test");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="nav">
  <li><a href="#">test 1</a>
  </li>
  <li><a href="#">test 1</a>
  </li>
  <li><a href="#">test 1</a>
    <ul class="dp">
      <li><a href="#">test 2</a>
      </li>
      <li><a href="#">test 2</a>
      </li>
    </ul>
  </li>
</ul>





更新:

如haim770的建议,将事件处理程序绑定到适当的选择器以防止冒泡



$(document).ready(function() {
  $(document).on("click", ".nav > li > a", function() {
    alert("test");
  }).on("click", ".dp a", function() {
    alert("test");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="nav">
  <li><a href="#">test 1</a>
  </li>
  <li><a href="#">test 1</a>
  </li>
  <li><a href="#">test 1</a>
    <ul class="dp">
      <li><a href="#">test 2</a>
      </li>
      <li><a href="#">test 2</a>
      </li>
    </ul>
  </li>
</ul>

10-05 20:52
查看更多