阻止事件冒泡

本文详细解析了HTML中事件冒泡的机制,通过实例展示了如何使用cancelBubble和stopPropagation来阻止事件冒泡,以及它们之间的区别。适用于解决AJAX应用中不同层事件干扰的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在html中触发的事件会往上冒泡,直到最上层.比如

源码:


<div onclick="alert('div is clicked')">

<a onclick="alert('a is clicked'); return false;" href="#">Click me, twice alert</a>

</div>



点击click,会弹出两个alert提示框.
防止触发上层div的方法是在点击时事件中加上:event.cancelBubble=true;
如下:

源码:


<div onclick="alert('div isn\'t clicked')">

<a onclick="alert('a is clicked'); event.cancelBubble=true;return false;" href="#">Click me, Once alert</a>

</div>

这种做法是从Bret Taylor的blog上面抄来的,原文地址在这里(好像是,不是也别怪我。)。对于避免ajax应用中不同层的事件干扰很有用的。

先说一下“取消(cancel)”和“停止(stop)”的区别:说白了,停止就是当事件发生后,阻止它自动冒泡到父容器内;而取消则是当冒泡发生到父容器之后停止,也就是不在当前元素中响应。天哪,这东西说起来话长了,代码说话: 

js 代码
Js代码  复制代码
  1. function stopEvent(e) {  
  2.                         if (!e) e = window.event;  
  3.                         if (e.stopPropagation) {  
  4.                         e.stopPropagation();  
  5.                         } else {  
  6.                         e.cancelBubble = true;  
  7.                         }  
  8.                         }  
  9.                         var link = document.getElementById("link");  
  10.                         link.onclick = stopEvent;  
  11.                           
function stopEvent(e) { if (!e) e = window.event; if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } } var link = document.getElementById("link"); link.onclick = stopEvent;

 

以上这一段是阻止父容器事件的 

js 代码
Js代码  复制代码
  1. function cancelEvent(e) {  
  2.                         if (!e) e = window.event;  
  3.                         if (e.preventDefault) {  
  4.                         e.preventDefault();  
  5.                         } else {  
  6.                         e.returnValue = false;  
  7.                         }  
  8.                         }  
  9.                         var link = document.getElementById("link");  
  10.                         link.onclick = function(e) {  
  11.                         cancelEvent(e);  
  12.                         stopEvent(e);  
  13.                         }  
  14.                           
function cancelEvent(e) { if (!e) e = window.event; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } var link = document.getElementById("link"); link.onclick = function(e) { cancelEvent(e); stopEvent(e); }

 

以上这一段是阻止子元素事件的

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2008/12/27/1363419.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值