有一些这样的html代码:
<ul>
<li id='root' class='tree-node'>
root
<ul>
<li class='tree-node' id='node1'>node1</li>
<li class='tree-node' id='node2'>node2</li>
<li class='tree-node' id='node3'>node3</li>
<li class='tree-node' id='node4'>node4
<ul>
<li class='tree-node' id='node4-1' >node4-1</li>
<li class='tree-node' id='node4-2' >node4-2</li>
</ul>
</li>
</ul>
</li>
<ul>
我想将点击事件绑定(bind)到每个具有树节点类的标签
并将点击事件绑定(bind)到文档
这是我的代码:
$(".tree-node").click(function(e){
console.log($(this).attr("id"));
});
$(document).click(function(e){
console.log("document clicked!");
});
stopPropagation() 是否有任何替代方法来阻止事件从 node4-2 冒泡到其父节点？
fiddle :http://jsfiddle.net/R6ySc/
最佳答案
您可以只使用文档点击事件并从那里处理所有事情。
$(document).click(function(e){
console.log("document clicked!");
var t = $(e.target);
if(t.attr("class") == "tree-node") {
console.log("tree node clicked");
}
});
检查这个 fiddle :http://jsfiddle.net/R6ySc/3/
作为替代方案，您还可以在文档的 onclick 事件中指定一个选择器(为此检查 jQuery documentation):
$(document).on("click", ".tree-node", function(e) {
e.stopPropagation();
console.log("tree node '" + $(this).attr("id") + "' clicked");
});
作为引用，查看下面的评论
关于javascript - 我如何在没有 stopPropagation 方法的情况下停止事件冒泡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13117667/