下面是我的代码段,问题是,如果单击文本为“ 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>