javascript - 如何在没有 stopPropagation 方法的情况下停止事件冒泡

Question

有一些像这样的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>

我想将点击事件绑定到每个具有树节点类的标签

并将点击事件绑定到文档

这是我的代码：

$(".tree-node").click(function(e){
    console.log($(this).attr("id"));
});

$(document).click(function(e){
    console.log("document clicked!");   
});

stopPropagation() 是否有任何替代方法来阻止从 node4-2 到其父级的事件冒泡？

小提琴：http: //jsfiddle.net/R6ySc/

Answer 1

您可以只使用文档单击事件并从那里处理所有内容。

$(document).click(function(e){
    console.log("document clicked!");    
    var t = $(e.target);
    if(t.attr("class") == "tree-node") {
        console.log("tree node clicked");
    }
});​

检查这个小提琴：http: //jsfiddle.net/R6ySc/3/

作为替代方案，您还可以在文档的 onclick 事件中指定一个选择器（请查看jQuery 文档）：

$(document).on("click", ".tree-node", function(e) {
    e.stopPropagation();
    console.log("tree node '" + $(this).attr("id") + "' clicked");
});​

供参考，请查看下面的评论