取消冒泡和阻止默认事件

最新推荐文章于 2022-06-30 14:39:24 发布
最新推荐文章于 2022-06-30 14:39:24 发布
阅读量157 收藏
点赞数
分类专栏： js事件 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mwsblue/article/details/114537520
版权
本文介绍了如何在不同浏览器环境下取消冒泡事件（event.stopPropagation()与event.cancelBubble）以及阻止默认事件（return false, event.preventDefault(), event.returnValue=false）。重点讲解了这些方法在W3C标准与IE版本中的适用性。
摘要由CSDN通过智能技术生成

1、取消(停止)冒泡

a) W3C标准 event.stopPropagation();但不支持 ie9以下版本
b) event.cancelBubble=true; ie8及ie8以下可用

2、阻止默认事件

默认事件——表单提交（当表单中只有一个input_text框时,回车即被提交），a标签跳转，右键菜单等

a) return false; 以对象属性的方式注册的事件才生效，用addEventListener/attachEvent这种是不生效的
b) event.preventDefault(); W3C标准，IE9以下不兼容
c) event.returnValue=false;兼容IE

mwsblue
关注
专栏目录
js基础---取消冒泡和阻止默认事件
weixin_44164982的博客
08-03 1151
1、取消冒泡 （1）冒泡解除 （2）封装一个stopBubble函数，阻止冒泡 2、阻止默认事件 （1）默认事件阻止 （2）封装阻止默认事件的函数 cancelHandler();
JS中事件的冒泡与冒泡的取消
Fantasc的博客
08-09 2163
事件的冒泡：（Bubble） ​ 所谓的事件冒泡，就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。 注意：是相同的事件，而不是相同的响应函数内容，比如大家都绑定了onclick单击事件，叫做相同的事件。 以下是练习的小例子： 在以下代码中，span是div元素的子元素，而div是body的子元素，他们都绑定的是一样的事件，所以当span元素的响应函数被触发时，绑定了相同事件的的父元素以及祖先元素的响应函数也会被触发。 所谓的向上传递，指的是向当前元素的父元素或
JS 取消冒泡和阻止默认事件
qq_45560350的博客
08-27 1223
事件对象 每个事件处理函数中，都可以有一个形参，系统会自动传递一个事件对象到函数中，这个对象的每个属性都代表事件被触发时的一些关键性数据 div.onclick = function(e){//形参e就是系统传递的事件对象 console.log(e); } 取消冒泡 1 .W3C标准 event.stopPropagation();但不支持IE9以下版本 document.onclick = function(){ console.log('aha'); } div.onclick = fun
取消冒泡事件
yimeng501的专栏
08-21 339
function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt:window.event; if (window.event) { e.cancelBubble=true; } else { e.stopPropagation(); } } This...
阻止事件默认行为（取消事件默认行为）
大脸小覃的博客
10-09 332
阻止事件默认行为（取消事件默认行为）：event.preventDefault();ie678以下不兼容 ie678用:event.returnValue = false; 方法 一： ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; 方法 二： return false;–只能在句柄式绑定事件中 ...
浅谈jQuery 中的事件冒泡和阻止默认行为
10-22
本文将详细探讨jQuery中的两个重要概念：事件冒泡和阻止默认行为。通过具体的代码示例和解释，本文将帮助您理解和掌握如何在使用jQuery进行前端开发时，更好地控制页面上的事件交互。 1. 事件冒泡的概念与应用 事件...
js阻止冒泡和默认事件（默认行为）详解
10-21
综上所述，JavaScript中的阻止冒泡和阻止默认行为是非常重要的技术点，它们在处理复杂的事件监听和避免不必要的事件触发时发挥着重要的作用。理解并掌握这些技术对于提升前端开发的交互体验与代码质量具有重要意义。
Js阻止事件冒泡与阻止默认事件
weixin_44562686的博客
12-15 2260
1、event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 event.isPropagationStopped()方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法 取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
12-12
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e....
阻止事件（取消其默认行为并阻止其传播）
Lazy_carrot的博客
11-01 489
阻止事件（取消其默认行为并阻止其传播） ，阻止js事件冒泡
阻止默认事件
letterTiger的博客
10-12 4234
事件传播流程，先是事件捕获然后处于目标阶段然后事件冒泡。还有阻止默认事件（preventDefault()）的阻止标签默认行为。
阻止冒泡（默认）事件（兼容IE8）
11-24 1449
看下面HTML代码：   <div onclick="parentClicked()"> 点击我（父元素） <div onclick="childClicked()"> 点击我（子元素） </div> </div> <script> function childClic
JavaScript 取消默认事件、阻止事件冒泡的方法
编程界明世隐的博客
12-16 1450
首先页面上创建一个a标签：<a href="#" onclick="do_Click()">默认事件</a> 然后给body加一个点击事件： document.body.onclick=function(){ alert('body'); } 当我点击这个a标签的时候会有两个我们不想发生的事情： 1.浏览器地址尾部出现 # 号，这是a标签的默认事件。 2.alert('body'); 被执行了，这是事件冒泡。 针对这两个有专门的控制方...
阻止事件默认行为和事件冒泡行为
cloudyless的博客
06-30 2651
阻止事件默认行为和冒泡行为
a标签事件冒泡
热门推荐
jicai520的博客
07-25 1万+
当拥有一个父类时，会出现冒泡的情况 的href属性无效，这个时候需要阻止事件冒泡<!DOCTYPE html > <html> <head> <title>Porschev---Jquery 事件冒泡</title> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> </head> <body><form
a标签和阻止事件冒泡
u013558123的博客
10-20 5882
昨天遇到一个奇葩问题，自己在<a>标签里面包了一个<img>标签，在<img>标签上定义了一个方法，点击方法用jqueryUI弹出窗口，结果点击图片的时候能正常的弹出窗口，但是很快一闪就自动关闭了，一直一位是冒泡的问题，但是写了阻止冒泡的方法还不行，后来以为是jqueryUI的问题，折磨了两个小时，最后把方法定义到<a>标签上，问题解决。原来是阻止冒...
阻止a标签中的元素跳转
GuoZebin的博客
02-07 2252
在一个a标签中有一个div，使点击这个div时不发生跳转，需要阻止div事件冒泡同时阻止div默认事件。即：     event.stopPropagation() /event默认为传入的第一个参数     event.preventDefault()  ...
理解JavaScript中的事件冒泡与阻止冒泡
本文主要探讨了JavaScript中的冒泡事件，通过一个具体的div弹窗事件示例，解释了事件冒泡的原理，并展示了如何通过`event.stopPropagation()`方法来阻止事件冒泡，以及`event.preventDefault()`方法防止默认行为的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值