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

html如下:

<div class="turnTo">点击跳转 

        <span class="pop">弹框弹出</span>

</div>

给外层div注册点击事件使其跳转到另一页面，给span注册点击事件，弹框弹出；

但是点击span时，弹框弹出后页面也跳转了。

解决这个问题我们先来了解下

DOM的事件对象：

preventDefault() 取消事件的默认行为

stopPropagation() 取消事件冒泡对当前节点无影响

cancelBubble() 取消事件冒泡

DOM事件处理有三个阶段：

捕捉阶段（capture phase）：从最上层元素，直到最下层（你点击的那个target）元素。路过的所有节点都可以捕捉到该事件。

命中阶段（target phase）：如果该事件成功到达了target元素，它会进行事件处理。

冒泡阶段（bubbling phase）：事件从最下层向上传递，依次触发父元素的该事件处理函数。

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

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

return false做了三件事：

stopPropagation()阻止事件传播

preventDefault()禁止浏览器默认行为

立即结束当前函数并且返回

简单粗暴。

$(".pop").click(function (e) {

        $('.mask-big').show();

        return false;

}