javascript - jquery事件绑定父节点时，如何阻止对子节点事件的劫持？

Question

比如下面这种：

HTML:

​<p class="hello">
<a href="http://example.com" target="_blank" id="link">link</a>
<p>say hello world to everynone</P>
</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery:

$('.hello').click(function() {
    $('p').toggleClass('hidden');
});​

1. 当点击 .hello 任何区域都能将 p 隐藏，但我不希望点击 #link 的时候 p 也隐藏，应该如何做呢？
2. 当 #link 绑定了其他的 js 事件时，又该如何做呢？

http://jsfiddle.net/H26rM/

Answer 1

手册一定要认真看啊，jquery手册，搜索bind函数，底部有专门的例子说明
通过使用 preventDefault() 方法只取消默认的行为。
比如某个表单本来点击submit是提交的，但是如果加入了event.preventDefatult() 则默认的submit行为就失效了

$("form").bind("submit", function(event){
  event.preventDefault();
});

通过使用 stopPropagation() 方法只阻止一个事件起泡。事件的冒泡三言两语说不清楚，去百度查吧，很多
http://jsfiddle.net/H26rM/1/

Answer 2

可以用JQuery的stopPropagation()方法来阻止事件冒泡。
link点击的时候处理一下：

$('#link').click(function(e){
    e.stopPropagation();
});

Answer 3

$('.hello').click(function(e){
  if(e.target.tagName != 'A' ){
    $('p').toggleClass('hidden');
  } 
});

判断一下点击事件的目标节点即可，当 #link 绑定了其他的 js 事件时这样处理也没问题。