如果某元素定义了事件 A,如 click 事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
Js 冒泡机制是指如果某元素定义了事件 A,如 click 事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的 click 函数。
如下例所示:
- <html>
- <script type="text/javascript" src="jquery-1.7.1.js">
- </script>
- <script>
- function ialertdouble(e) {
- alert('innerdouble');
- stopBubble(e);
- }
- function ialertthree(e) {
- alert('innerthree');
- stopBubbleDouble(e);
- }
- function stopBubble(e) {
- var evt = e || window.event;
- evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true); //阻止冒泡
- }
- function stopBubbleDouble(e) {
- var evt = e || window.event;
- evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true); //阻止冒泡
- evt.preventDefault(); //阻止浏览器默认行为,这样链接就不会跳转
- }
- $(function() {
- //方法一
- //$('#jquerytest').click(function(event) {
- // alert('innerfour');
- // event.stopPropagation();
- // event.preventDefault();
- //});
- //方法二
- $('#jquerytest').click(function() {
- alert('innerfour');
- return false;
- });
- });
- </script>
- <div onclick="alert('without');">
- without
- <div onclick="alert('middle');">
- middle
- <div onclick="alert('inner');">
- inner
- </div>
- <div onclick="ialertdouble(event)">
- innerdouble
- </div>
- <p>
- <a href='http://www.baidu.com' onclick="ialertthree(event)">
- innerthree
- </a>
- </p>
- <p id='jquerytest'>
- <a href='http://www.baidu.com'>
- innerfour
- </a>
- </p>
- </div>
- </div>
- </html>
当你点击 inner 的时候,会依次弹出'inner','middle'和'without'。这就是事件冒泡。 从直观上来看,也是这样的,因为最里层的区域是在父级节点中的,点击了子级节点的区域,其实也是点击了父级节点的区域,所以事件会传播起来。 其实,很多的时候,我们并不想事件冒泡,因为这样会同时触发几个事件。 接下来:我们点击 innerdouble。就会发现她并没有冒泡,因为她在调用的方法 ialertdouble() 中调用了 stopBubble() 方法,方法通过判断浏览器类型(Ie 通过 cancleBubble() 、firefox 通过 stopProgation())来阻止冒泡。 但如果是链接的话,我们会发现她也会阻止冒泡,但是会跳转,这就是浏览器的默认行为。需要借助 preventDefault() 方法来阻止。具体可以查看 ialertthree()。 目前主流的都是借助 jquery 来绑定 click 事件的,这样的话,就简单多了。 我们可以在点击事件时传入参数 event,然后直接 event.stopPropagation(); event.preventDefault(); // 没有链接不需要加这个。 这样就可以了。 框架就是好,其实还有更简单的,在事件处理程序中返回 false,这是对在事件对象上同时调用 stopPropagation() 和 preventDefault() 的一种简写方式。 【详细代码见上面,记得载入 jquery.js。】 其实也还可以在每个 click 事件中加入判断: 解析:事件处理程序中的变量 event 保存着事件对象。而 event.target 属性保存着发生事件的目标元素。这个属性是 DOM API 中规定的,但是没有被所有浏览器实现 。jQuery 对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过. target,可以确定 DOM 中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道 this 引用的是处理事件的 DOM 元素,所以可以编写以上代码。 不过推荐使用 return false,Jquery 绑定事件的话。
来源: