js实现触发子元素事件，而不触发父元素事件

在这之前，我们先了解一下

DOM的事件对象：

1. preventDefault() 取消事件的默认行为
2. stopPropagation() 取消事件冒泡对当前节点无影响
3. cancelBubble() 取消事件冒泡

DOM事件处理有三个阶段：

1. 捕捉阶段（capture phase）：从最上层元素，直到最下层（你点击的那个target）元素。路过的所有节点都可以捕捉到该事件。
2. 命中阶段（target phase）：如果该事件成功到达了target元素，它会进行事件处理。
3. 冒泡阶段（bubbling phase）：事件从最下层向上传递，依次触发父元素的该事件处理函数。

在任意一个阶段的事件处理函数中，都可以通过调用event.prepagation()来中断事件流，后续的阶段将不会被调用。

回归正题。我们可以在触发子元素的事件中，事件处理完成后，加一个return false,即可阻止父元素事件的触发。这里我举个，代码如下：

HTML代码：

<div class='parent'>
  <div class='child'></div> 
</div>

JS代码：

 $('.child').bind('click',function(){
    console.log('child');
    return false;
  });
  $('.parent').bind('click',function(){
    console.log('parent');
    return false;
  });

return false做了三件事：

1. stopPropagation()阻止事件传播
2. preventDefault()禁止浏览器默认行为
3. 立即结束当前函数并且返回