jQuery中，子元素是否可以向父元素注册点击事件？

Question

如果我有一个浮动的消息框，并且我想知道在其中单击段落文本是否也会在jQuery中注册对其父元素的单击，或者我是否还需要为子元素添加单击侦听器。

更新：这是基本布局：

<div id='msgbox'>
<p>This is the <span>message</span></p>
</div>

现在，如果我单击

中的文本或中的文本，它是否仍然会触发对$('#msgbox')的单击？

更新2: 我可以停止这种行为吗？

更新3: 这是我正在使用的JSFiddle:http://jsfiddle.net/MZtbY/ - 现在是否有一种方法可以在达到某个级别后停止传播？这样单击

就可以了，但单击将不起作用？- 类似于$('#msgbox :nth-child').click(function(e) {e.stopPropagation();});。

- Dan

---

这里有一个新的想法：如果内部文本是动态的，是否有一种方法可以防止它？ - Dan

Answer 1

这里有一个在jsFiddle上的例子

$('#msgbox').click(function(evt){ 
   alert("click on msgbox: "+evt.target); 
});

// stop bubbling for the span only.
$('#msgbox span').click(function(evt) { 
   evt.stopPropagation(); 
});

请注意，单击#msgbox <div>（这是jsFiddle中的红色框），或单击段落文本的第一部分都会触发#msgbox上的事件处理程序；但单击<span>内部的文本不会触发事件。这是因为我们直接将处理程序应用于span，并在该事件上调用了stopPropagation()以防止正常的冒泡动作。

---

更新: 这里有一个关于你的代码片段的更新，展示了同样的内容。

- Lee

---

很酷。如果内容是动态的，而且我不知道里面有个<span>标签呢？ - Dan

然后给它一个ID、类名或者其他可选的选择器。无论你怎样创建jQuery对象——一旦得到了它，绑定一个点击事件处理程序并使用stopPropagation。如果你是在绑定事件之后添加动态内容的，那么你需要使用.live('click', function(evt){...});而不是.click(function(evt){...})。 - Lee

好的，那很有道理，但我不确定如何选择“所有曾孙”，是否有jQuery函数可以实现？ - 仔细想想，我觉得我离开了原来的问题，所以我会自己查一些资料。- 谢谢@Lee的帮助。 - Dan

"所有#msgbox的曾孙后代：" $（'＃msgbox> * > * > *'）。请查看[jQuery选择器文档页面]（http://api.jquery.com/category/selectors/）以了解所有可用的不同jQuery选择器的详细信息。 - Lee

Answer 2

如果您想防止它冒泡，请使用以下方法：

e.stopPropagation(); 

- aziz punjani

---

太棒了。有没有一种方法在达到某个级别后停止传播？因此，单击<p>是可以的，但单击<span>将不起作用？ - Dan

Answer 3

默认情况下，JavaScript中的事件会“冒泡”。它们在触发的级别上触发，然后逐个通过父元素触发。

更多关于事件冒泡的内容，请访问：http://www.quirksmode.org/js/events_order.html 要停止事件冒泡，请参考：Prevent "bubbling"?

- Rob Allen

---

感谢您的技巧和链接。 - Dan