在父元素具有相同事件函数的子元素上触发两次单独的事件函数

Question

下面是我的片段，问题是，如果单击具有"test 1“文本的"li”元素，警报提示确实触发一次(正常)，但如果单击具有"test 2“文本的"li”元素，则会触发两次警报提示符，类似于两次调用的click事件函数。有什么想法线索吗？

​

$(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>

​

Answer 1

使用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>

​

更新:

按照the 770的建议，将事件处理程序绑定到适当的选择器以防止冒泡。

​

$(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>

​

Answer 2

指定第一个单击事件的超链接。

小提琴：https://jsfiddle.net/cshanno/Loc4427u/1/

JS

$(document).ready(function(){

  $(document).on("click", "ul:nth-child(1) > li > a", function(){

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

   alert("test 2"); 
  })

});