JavaScript事件——阻止冒泡、阻止默认行为

最新推荐文章于 2025-03-26 14:29:50 发布
原创 最新推荐文章于 2025-03-26 14:29:50 发布 · 201 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细介绍了如何在非IE和IE浏览器中阻止事件冒泡和默认行为，包括使用e.stopPropagation和e.cancelBubble=true阻止冒泡，以及使用e.preventDefault和e.returnValue=false阻止默认行为。同时，文章还列举了多种类型的事件，如表单、一般、页面和滚动字幕事件。

一、事件阻止冒泡

语法：
事件对象.属性名称
非IE：e. stopPropagation
IE： e. cancelBubble = true；
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
兼容
在这里插入图片描述
在这里插入图片描述

二、事件阻止默认行为

语法：
事件对象.属性名称.
非IE: e. preventDefault()
IE: e. returnValue = false；
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
#案例：右击（阻止显示表单）
在这里插入图片描述
在这里插入图片描述
#案例：屏蔽右键
在这里插入图片描述
在这里插入图片描述
但是IE 不支持此属性
在这里插入图片描述
IE支持：
在这里插入图片描述
在这里插入图片描述
右击，出现111
在这里插入图片描述
兼容处理：
在这里插入图片描述

结果都可以运行：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
#JS触发事件（事件—浏览器支持—解说）
1、表单相关事件
在这里插入图片描述

2、一般事件
在这里插入图片描述
3、页面相关事件
在这里插入图片描述

4、滚动字幕事件
在这里插入图片描述

事件侦听和删除事件——event对象——按钮精灵——默认事件——取消冒泡事件——事件委托——默认触发——onload 图片预加载四个迭代版本
阿牛哥的博客
07-22 1020
事件侦听和删除事件——event对象——按钮精灵——默认事件——取消冒泡事件——事件委托——默认触发——onload 图片预加载四个迭代版本
Vue——02-06 阻止事件冒泡，阻止默认行为以及监听键盘回车事件
NanChen的博客
09-26 1696
.stop:阻止事件冒泡 如果我们不想让其事件进行冒泡，可以使用.stop来阻止事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
js阻止冒泡
02-26
js阻止冒泡 $(document).click(function(){ $(".scxl").children('ul').hide(); })
【JavaScript】阻止事件冒泡和默认行为
小秀的博客
05-12 3487
在JavaScript中，事件默认行为是指在特定的事件发生时浏览器自动执行的操作。form 元素 的 action 属性值表单内容要提交的地址，而用户点击表单元素中嵌套的提交按钮时，就会有一个默认的提交操作。需要注意的是，不同的事件有不同的默认行为，因此阻止默认行为的方法可能会有所不同。方法用于阻止事件的进一步传播，而不是直接阻止事件的默认行为。也是 event的一个属性，表示默认行为是否被阻止，true 表示被阻止。方法用于阻止事件传播，而不是直接阻止事件的默认行为。可以阻止默认行为的执行。
JS-阻止事件冒泡
chunchun的博客
11-12 1181
在 JavaScript 中，阻止事件冒泡（即阻止事件从子元素传播到父元素）可以通过方法来实现。这个方法可以防止事件继续向上层元素传播。
js 阻止事件冒泡，阻止默认事件
Robin 的博客
09-19 537
https://blog.youkuaiyun.com/wxl1555/article/details/53128966
理解JavaScript中的事件冒泡与阻止冒泡
本文主要探讨了JavaScript中的冒泡事件，通过一个具体的div弹窗事件示例，解释了事件冒泡的原理，并展示了如何通过`event.stopPropagation()`方法来阻止事件冒泡，以及`event.preventDefault()`方法防止默认行为的...
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 9562
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
JQurey入门——事件机制之事件中的冒泡现象示例解释
12-11
返回`false`同样可以达到阻止冒泡的效果，但它还取消了事件的默认行为，比如链接的跳转或表单的提交。 总结来说，事件冒泡是DOM事件处理中的重要概念，它描述了事件从内向外传递的过程。理解并掌握事件冒泡可以帮助...
JavaScript基础-阻止事件冒泡
m0_61787196的博客
03-24 1448
JavaScript基础-阻止事件冒泡
js阻止默认行为
weixin_34272308的博客
03-16 785
为什么80%的码农都做不了架构师？>>> ...
前端知识点---事件委托和机制-阻止冒泡机制-阻止默认行为机制(javascript)
最新发布
2302_80171619的博客
03-26 1729
事件委托是一种将事件监听器绑定到父元素上，利用事件冒泡机制来处理子元素事件的技术。事件冒泡：当一个元素上的事件被触发时，事件会从目标元素向上冒泡到其父元素，直至根元素（document）。e.stopPropagation()：阻止事件从当前目标元素继续向上冒泡，不会触发父元素的事件监听器。e.stopPropagation() 的作用是 阻止事件继续冒泡，让事件不会再传递到父元素。e.stopPropagation() 只阻止事件冒泡，不会阻止同一元素上的其他事件执行。
Js阻止事件冒泡与阻止默认事件
qsj0606的博客
04-23 2700
Js阻止事件冒泡与阻止默认事件 1、event.stopPropagation()方法 event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法 取消事件的默认动作。该方法将通
JavaScript-----阻止事件默认行为和事件冒泡
weixin_45904557的博客
06-10 2607
目录一.阻止事件默认行为1.preventDefault();方法2.低版本浏览器 returnValue属性3.return false;e.stopPropagation();e.cancelBubble = true; 阻止事件冒泡的兼容性解决方案阻止事件默认行为的三种方法: 以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底: //stop 停止 Propagation传播//ie cancel取消 bubble泡泡 阻止冒泡排序之后:...
javascript阻止冒泡和阻止默认行为
huangxiao1988819的博客
11-13 621
js中的冒泡和默认行为是两个不同的概念。事件冒泡是js dom事件流的一个步骤，而dom的默认行为，是dom标签自带的属性。比如a标签，点击a标签会触发href的连接，这就是a标签的默认行为。所以，阻止冒泡和阻止默认行为是两个不同的概念。  js阻止默认事件的方法是： e.preventdefault() ,IE中的处理方式有所不同：e.returnValue =false  js阻止默认
用JS阻止事件冒泡
清秋伊叶的专栏
07-14 7544
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 可以用JS来阻止js事件冒泡。因为浏览器的差异IE和FF的JS写法有点不一样。IE用c
JS阻止事件冒泡
itmyhome的专栏
01-16 9784
如下测试代码： #div{border: 1px solid red;width: 500px;} #p1,#p2{border: 1px solid red;} 我是外层DIV 我是P1 阻止事件冒泡 我是P2 未阻止事件冒泡 JS阻止事件冒泡代码： function clickDiv(){ alert("我是外层DIV"); } function cl
jquery 阻止事件冒泡
whqwyn的博客
11-11 890
1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的： 重点内容 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值