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

Question

下面是我的代码片段，问题是，如果您单击具有“test 1”文本的“li”元素，则警报提示确实触发一次(正常)，但如果您单击具有“test 1”文本的“li”元素，文本为“test 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>

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>

更新:

按照haim770的建议，将事件处理程序绑定(bind)到适当的选择器以防止冒泡

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