首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根。
阻止冒泡:
1、stopPropagation()【对于非IE浏览器】
2、cancelBubble属性为true【对于IE浏览器】
另:Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation();即
如果有多个相同类型事件的事件监听函数绑定到同一个元素,当该类型的事件触发时,它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法,则当前元素剩下的监听函数将不会被执行。(译者注:注意区别 event.stopPropagation )
案例参考如下
<html>
<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
<body>
<style type="text/css">
<!--
.outclick{
padding:30px 0; background