Javascript 单击另一个内部的处理程序
我有一个结构，它使用了两个包含锚定标记的列表元素。基本上，我在列表元素本身上有一个单击处理程序，在其中的锚标记上有另一个单击处理程序。但是，我遇到的问题是，当我单击锚标记时，它会触发列表元素的click处理程序Javascript 单击另一个内部的处理程序,javascript,jquery,html,Javascript,Jquery,Html,我有一个结构，它使用了两个包含锚定标记的列表元素。基本上，我在列表元素本身上有一个单击处理程序，在其中的锚标记上有另一个单击处理程序。但是，我遇到的问题是，当我单击锚标记时，它会触发列表元素的click处理程序 $（.myStructure”）。在（“单击“，.myLis”，doSomeAction”）； $（“.myStructure”）。在（“单击”，“myLink2”，doSomeAction2） 基础知识 基础知识 您可以从链接事件处理程序调用 防止事件在DOM树中冒泡，防
$（.myStructure”）。在（“单击“，.myLis”，doSomeAction”）；
$（“.myStructure”）。在（“单击”，“myLink2”，doSomeAction2）
基础知识
基础知识
您可以从链接事件处理程序调用
防止事件在DOM树中冒泡，防止任何
父处理程序不会收到事件通知
以下是一个工作版本：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="myStructure">
<li class="myLis">
<a id="myLink" href="#">ABC</a>
</li>
<li class="myLis">
<a id="myLink2" href="#">ABC</a>
</li>
</div>
</body>
<script type="text/javascript">
$("#myLink").on("click", function(){
console.log('hi')
});
$("#myLink2").on("click", function(){
console.log('ho')
});
</script>
</html>
$（“#myLink”）。在（“单击”，函数（）上）{
console.log（'hi'）
});
$（“#myLink2”）。在（“单击”，函数（）{
console.log（'ho'）
});
是的，有一个很好的解决方案。您只需将元素事件侦听器绑定到根节点，并使用事件冒泡来侦听它的事件
$(".myStructure").each( function() {
// Binds the event only once to the root element
this.addEventListener("click", function(event) {
// The critical point is here!!!
var elem = $(event.target);
// and after you have the element, it is easy to check which it was
if(elem.hasClass("myLis")) {
alert("List element click!");
}
if(elem.prop("tagName")=="A") {
alert("A element was clicked!");
}
});
});
您可以使用此模式执行更复杂的操作，并且只有一个事件处理程序将操作分派给正确的函数
测试台在这里
编辑：此解决方案的难点在于您必须从事件目标检查您应该做什么。如果目标没有属性、类或其他元信息，那么您不知道该怎么做。只有一个事件处理程序的优点是有成本的
然而，如果您使用某种生成HTML的模板引擎，那么这一缺点可能会成为一种优势。这样，每次将新的HTML重新分配给“myStructure”元素时，就不必将事件重新绑定到HTML内容
$(".myStructure").each( function() {
// Binds the event only once to the root element
this.addEventListener("click", function(event) {
// The critical point is here!!!
var elem = $(event.target);
// and after you have the element, it is easy to check which it was
if(elem.hasClass("myLis")) {
alert("List element click!");
}
if(elem.prop("tagName")=="A") {
alert("A element was clicked!");
}
});
});