阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量1.2k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript xhtml div html function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312"> 
<head> 
<title> 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）</title> 
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" /> 
<script type="text/javascript"> 
function doSomething (obj,evt) { 
 alert(obj.id); 
 var e=(evt)?evt:window.event; 
 if (window.event) { 
 e.cancelBubble=true; 
 } else { 
 //e.preventDefault(); 
 e.stopPropagation(); 
 } 
} 
</script> 
</head> 
<body> 
<div id="parent1" οnclick="alert(this.id)" style="width:250px;background-color:yellow"> 
 <p>This is parent1 div.</p> 
 <div id="child1" οnclick="alert(this.id)" style="width:200px;background-color:orange"> 
 <p>This is child1.</p> 
 </div> 
 <p>This is parent1 div.</p> 
</div> 
<br /> 
<div id="parent2" οnclick="alert(this.id)" style="width:250px;background-color:cyan;"> 
 <p>This is parent2 div.</p> 
 <div id="child2" οnclick="doSomething(this,event);" style="width:200px;background-color:lightblue;"> 
 <p>This is child2. Will bubble.</p> 
 </div> 
 <p>This is parent2 div.</p> 
</div> 
</body> 
</html>
 
napor001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript事件也可以冒泡泡(Bubble)
Hemx的博客
03-06 2057
事件的冒泡（Bubble） 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&gt...
JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍
weixin_34088598的博客
05-17 238
event.preventDefault()用法介绍： 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。 例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。 注意：如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用...
js的stopPropagation()、cancelBubble、preventDefault()、return false的分析
waiting_area的博客
03-09 546
事件冒泡，举个列子： <li> <a href='http://www.baidu.com'>点击a</a> </li> <script> $('li').click(function () { alert('点击了li'); }); $('a').click(function () { alert('点击了a'); }); </script> 当你点击a的时
JS事件冒泡之cancelBubble和stoppropagation
qq_44731369的博客
07-09 983
什么是事件冒泡？ 在一个对象上绑定了某类事件 (如：onclick)，事件冒泡就是从当前触发的事件，由里到外，逐渐向父级对象传播，直到document为止。 其实stopPropagation的作用跟cancelBubble是一样的，都是用来阻止浏览器默认的事件冒泡行为。 不同之处在于： （1）stopPropagation符合W3C标准，适用于FireFox等浏览器，不支持IE （2）cancelBubble方法不符合W3C标准，只支持IE浏览 所以，很多时候我们都需要结合起来使用。 <!DOCTY
javascript中的cancelBubble和stopPropagation()
weixin_30823227的博客
07-19 111
都是用来阻止事件冒泡 cancelBubble可以阻止IE和火狐，比较通用 1. 事件目标 现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。 这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展 ，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DO...
js中e.cancelBubble解决事件冒泡
心合的博客
03-18 5556
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; #par{ width:400px;height:400px;background:
Javascript 阻止javascript事件冒泡，获取控件ID值
10-29
`，这将设置事件的`cancelBubble`属性为true，阻止事件继续冒泡。 2. **获取控件ID** 在JavaScript中，获取触发事件的控件ID是经常需要的操作，这可以帮助我们识别是哪个元素触发了事件。获取控件ID的方法因浏览器...
JavaScript阻止事件冒泡示例分享
10-24
在JavaScript中，有多种方法可以实现阻止事件冒泡： 1. 使用`event.stopPropagation()`方法：这是W3C标准的方法，适用于Firefox、Chrome、Safari、Opera等非IE浏览器。调用此方法后，事件将不会继续向上冒泡，事件...
JavaScript捕捉事件和阻止冒泡事件实例分析
12-03
本文通过实例分析了如何在JavaScript中捕捉事件以及如何阻止冒泡事件。 事件冒泡是指事件在DOM（文档对象模型）树中从最具体的节点（子节点）向上级节点（父节点）传播的过程。当一个元素发生事件，如点击（onclick...
学习笔记(3)关于Js的enevt.cancelBubble的作用
雨季不再来的专栏
03-24 2315
功能： 了解cancelBubble的作用。 掌握cancelBubble的正确用法。  说明： 前两天无意中看到晓风残月大大的一篇关于给GridView/DataGrid加单击事件实现浏览详细内容，双击事件确发该行为编辑列的Demo（该文地址：http://www.cnblog
阻止js事件冒泡的例子(cancelBubble 、stopPropagation)
十年树木的博客
06-30 3834
阻止JS事件冒泡传递（cancelBubble 、stopPropagation） function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt:window.event; if (window.event) { e.cancelBubble=true;// ie下阻止冒泡 } else { //e.preven
事件冒泡之cancelBubble和stoppropagation的区别
iammarrio的博客
10-20 2万+
事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。 不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器
原生js阻止冒泡stopPropagation()、cancelBubble
u010234868的专栏
07-07 288
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; height: 300px; background-color: pink; } #box2 { width: 200px; height: 2.
stopPropagation和cancelBubble的区别
杜小白的博客
03-07 2555
首先，总结一下DOM中的事件对象：（符合W3C标准）preventDefault()     取消事件默认行为stopImmediatePropagation()   取消事件冒泡同时阻止当前节点上的事件处理程序被调用stopPropagation()    取消事件冒泡对当前节点无影响IE中的事件对象：（不符合W3C标准）cancelBubble()   取消事件冒泡returnValue() ...
[jQuery]event.stopPropagation()报错
网站开发初中级代码参考-转载
07-17 210
使用jQuery给一个事件加处理方法时，为了阻止一个事件向上冒泡，使用了event.stopPropagation()，但在IE下却报对象不支持此属性或方法的错误（IE下是event. cancelBubble=true），jQuery不是兼容各浏览器吗？ 后来看了下jQuery的官方文档后，原来在使用event的时候，必须在事件处理方法中加入参数event，否则这个event为 window....
Unused import statement解决方法
热门推荐
天天开心鸭！
08-20 9万+
前言： 　　一直都能运行的项目，不知道怎么回事就突然报了这个问题   问题截图：   问题原因： 　　maven导入的项目的pom文件出了问题   问题解决： 　　在IDEA中找到pom文件右击-找到Git-Revert   小结：           后来仔细想了一下，可能是在点击时不小心将pom文件进行了修改，导致不能正常识别jar包导入地址。虽然是自己粗心而为...
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 459
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
js如何阻止事件冒泡
08-24
在JavaScript中，阻止事件冒泡有几种方法。一种常用的方法是使用`stopPropagation()`函数。这个函数可以在事件处理程序中调用，它会阻止事件继续传播到父元素。具体的代码如下所示： ```javascript function(event)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值