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

下面是我的代码片段，问题是，如果单击文本为“test 1”的“li”元素，警报提示确实会触发一次（正常），但是如果单击文本为“test 2”的“li”元素，警报提示会触发两次，就像调用了两次的click事件函数一样。有什么想法和线索吗

$（文档）.ready（函数（）{
$（document）.on（“click”，“.nav a”，function（））{
警报（“测试”）；
})
$（document）.on（“click”，“.dp a”，function（）{
警报（“测试”）；
})
});










使用时，它将阻止任何父事件操作


$（文档）.ready（函数（）{
$（document）.on（“click”，“.nav a”，function（））{
警报（“测试”）；
}).on（“点击“，”.dp a”，功能（e）{
e、 停止传播（）；
警报（“测试”）；
})
});














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

小提琴：

JS

因为对于带有“test 2”的
s，
.nav a
和
.dp a
都将匹配，因此这两个处理程序都将被调用。你能用小提琴发布你的答案吗？为什么首先要注册两个处理程序？您的第一个处理程序可以为所有子体正常运行
elementsim创建一个自定义下拉菜单。自定义下拉菜单，如果他们单击下拉容器（具有dp类的第二个ul），则隐藏下拉菜单，这是一个人工解决方案。更好的方法是使用正确的selector注册正确的处理程序，否则OP不会意识到第一个处理程序将匹配所有子体
元素。这也是为什么我没有发布我自己的答案，我需要了解他想要实现什么，以及为什么首先注册2名处理者（尽管没有否决）。好吧，根据OP的最后评论，我认为你的第二个解决方案会奏效。@haim770:让我们等待他的回答。好好工作！泰，普拉纳夫先生。无论如何，我正在尝试创建一个自定义下拉菜单，其中会出现这样一种情况：当用户单击任何下拉菜单（例如，子菜单“下拉容器ul”中的第二个ul）时，应该隐藏下拉容器，以便我绑定两个处理程序。
$(document).ready(function(){

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

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

   alert("test 2"); 
  })

});