如何停止事件，而不stopPropagation方法起泡

有一些HTML代码：如何停止事件，而不stopPropagation方法起泡

<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!"); 
});

是否有STO任何替代pPropagation（）停止从node4-2到其父母的事件冒泡？

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

来源

2012-10-29 Siami

为什么你不想使用stopPropagation？ – Adil

因为我想调用document click事件 – Siami

你可以只使用文档单击事件，并从那里处理一切。

$(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 documentation此）：

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

参考，查看下面的评论

来源

2012-10-29 07:53:02

更常规地（自jQuery 1.7以来），你可以使用'。。（document）.on（'click'，'.tree-node'，function（）{...}） '，在这种情况下，单击的节点在函数内部显示为'this'。 –

@甜菜根 - 甜菜根：好点。不过，我在小提琴中尝试了这个（http://jsfiddle.net/R6ySc/4/），然后再次出现传播问题。此外，常规文件点击（树外）不再处理... –

直接回答是的。这个事件确实会在DOM树一路上冒出火焰。我的观点不完整。我应该补充说，你可以（必要时）通过测试'（this == e.target）'来拒绝处理程序中的非目标点击。参见[更新的小提琴]（http://jsfiddle.net/R6ySc/5/）。并且常规文档点击（在树之外）是非常正确的不被处理的。 –

如何停止事件，而不stopPropagation方法起泡

回答

相关问题