javascript阻止事件冒泡和浏览器的默认行为

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

本文介绍了如何在Web开发中使用JavaScript阻止事件冒泡和默认行为的方法。包括cancelBubble和stopPropagation两个函数的区别，以及如何使用return false和preventDefault来阻止默认事件。

1、阻止冒泡：

cancelBubble:只要event事件做了兼容,ev.cancelBubble兼容所有浏览器;
stopPropagation:不兼容IE6/7/8;

obj.onclick = function(ev) {

var ev = ev || event;  // IE中event事件是内置的,即window.event;   标准:是都过事件函数的参数得到.
ev.cancelBubble = true; // 兼容所有浏览器
//ev.stopPropagation();  // 不兼容IE6/7/8
oDiv.style.display = 'block';

}

2、阻止默认事件：

return false:只能阻止DOM1中的事件

event.preventDefault():

浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
12-12
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e....
React 阻止冒泡失效
qq_36934775的博客
07-27 989
在react中可以用下面的阻止冒泡： e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); e.nativeEvent 才是原生 DOM 事件的那个 event React组件类似onClick的事件是合成事件，本质上所有绑定是代理到document上的，所有绑定都会冒泡到document层去执行 A、阻止合成事件间的冒泡，用e.stopPropagation(); B、阻止合成事件与最外层document上的事件间的冒泡，用e
React 阻止事件冒泡失效、stopPropagation和stopImmediatePropagation分析，解决stopPropagation没有阻止冒泡问题
qssn的博客
08-20 1万+
做开发中，React 和 JS 原生事件监听`addEventListener`混用了，因此发现了一个现象：React的阻止冒泡并没有阻止原生JS监听的事件触发。 下面代码的输出是（代码链接：https://codepen.io/Lik_Lit/pen/OJLROMW） “root click” “inner dom click” “document c......
【JavaScript】阻止事件冒泡和默认行为
小秀的博客
05-12 3511
在JavaScript中，事件默认行为是指在特定的事件发生时浏览器自动执行的操作。form 元素 的 action 属性值表单内容要提交的地址，而用户点击表单元素中嵌套的提交按钮时，就会有一个默认的提交操作。需要注意的是，不同的事件有不同的默认行为，因此阻止默认行为的方法可能会有所不同。方法用于阻止事件的进一步传播，而不是直接阻止事件的默认行为。也是 event的一个属性，表示默认行为是否被阻止，true 表示被阻止。方法用于阻止事件传播，而不是直接阻止事件的默认行为。可以阻止默认行为的执行。
在JavaScript 如何阻止事件冒泡和事件默认行为？
最新发布
前端大白话
07-20 1053
事件冒泡和默认行为是JavaScript事件处理中的两个核心概念，理解并掌握它们的控制方法，是写出流畅交互的前提。事件冒泡就像水中涟漪，会从触发点向上扩散，能有效阻止这种扩散，避免父元素的事件被误触发。这在处理嵌套元素的交互（如弹窗、下拉菜单）时特别重要，能防止“点A触发B”的乌龙事件。浏览器的默认行为是把双刃剑，方便了基础交互却限制了自定义需求。就像一把“总开关”，能禁用这些预设动作，让我们自由实现表单验证、自定义链接跳转等功能。事件对象是基础，必须正确获取和传递现代项目优先用和。
js事件冒泡与事件捕获、阻止事件冒泡和浏览器默认行为
weixin_45471827的博客
08-15 1909
1、事件流： 事件流描述的是从页面中接收事件的顺序，“事件冒泡流”由IE提出 ，“事件捕获流”由 Netscape 提出； 事件流包括三个阶段：事件捕获阶段、处于目标阶段（即触发事件的元素）和事件冒泡阶段。 “DOM2 级事件”规范要求事件应该从 document 对象开始捕获阶段，但主流浏览器都是从 window 对象开始。 “DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标（因为目标阶...
html 冒泡事件拦截,javascript阻止事件冒泡和浏览器的默认行为
weixin_31986143的博客
06-10 305
1.阻止事件冒泡,使成为捕获型事件触发机制.function stopBubble(e) {//如果提供了事件对象，则这是一个非IE浏览器if ( e && e.stopPropagation )//因此它支持W3C的stopPropagation()方法e.stopPropagation();else//否则，我们需要使用IE的方式来取消事件冒泡window.event.canc...
阻止事件冒泡 阻止浏览器的默认行为
徐同保的专栏
01-09 583
阻止事件冒泡 阻止浏览器的默认行为 按钮1 $(function() { function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation()方法
JavaScript中阻止事件冒泡与默认行为的技巧
学习和分享
11-24 697
事件冒泡是一种事件传播机制，当一个元素上的事件被触发时，该事件会从最内层的元素（事件目标）开始，向外层元素传播，直到根元素（通常是。在JavaScript中，可以通过调用事件对象上的特定方法来阻止事件冒泡和事件的默认行为。需要注意的是，在某些旧版本的浏览器中（主要是IE8及更早版本），可能需要使用。但在现代浏览器中，推荐使用上述的标准方法。要阻止这些默认行为，可以调用事件对象的。很多HTML元素上的事件都有默认的行为。要阻止事件冒泡，可以调用事件对象的。来同时阻止事件冒泡和默认行为。来阻止事件冒泡，以及。
什么是事件冒泡？如何阻止事件冒泡和浏览器默认事件？
BANaanaa的博客
10-28 766
关于事件冒泡
js阻止冒泡和默认事件（默认行为）详解
10-21
综上所述，JavaScript中的阻止冒泡和阻止默认行为是非常重要的技术点，它们在处理复杂的事件监听和避免不必要的事件触发时发挥着重要的作用。理解并掌握这些技术对于提升前端开发的交互体验与代码质量具有重要意义。
js对象操作，删除某个属性
热门推荐
和上帝躲猫猫
11-04 1万+
今天在开发中遇到js对象操作问题，做了以下总结: 对象定义 var obj = new Object(); 或 var obj = {}; 添加属性 obj.name = 'tom'; obj.ses='man'; 添加方法 obj.say = function(){ alert('22222'); } 调用 obj.say(); 修改属性 obj.name='jack'; 删除属性
ECMAScript和JavaScript的区别
和上帝躲猫猫
11-04 4202
ECMAScript，正式名称为 ECMA 262 和 ISO/IEC 16262，是宿主环境中脚本语言的国际 Web 标准。 ECMAScript 规范定义了一种脚本语言实现应该包含的内容；但是，因为它是可扩充的，所以其实现所提供的功能与这个最小集相比可能变化很大。 ECMAScript 是一种开放的、国际上广为接受的脚本语言规范。 它本身并不是一种脚本语言。正如在 Web 应用程序中执行有用
js获取DIV的位置坐标的三种方法
和上帝躲猫猫
11-04 3308
方法一： var odiv=document.getElementByIdx_x_x('divid'); alert(odiv.getBoundingClientRect().left); alert(odiv.getBoundingClientRect().top); 方法二：  function CPos(x, y)  {      this.
Ajax中跨域同步的问题
和上帝躲猫猫
03-04 1668
先来说下Ajax的同步问题 async(Boolean) (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 例子: $.ajax({ type:'get', url:'XXXXXXXX.php', //async:false, success:
offsetX与layerX区别
和上帝躲猫猫
11-04 1564
FF没有offsetX属性，有个layerX属性，只要将事件源的位置设置成相对定位(position:relative)或绝对定位(position:absolute)，两者结果就相等，表示事件源相对于父元素的X坐标。 一个简单的例子：判断鼠标位于事件源左边还是右边，在图片点击自动翻页中常用到。 function GetMousePosStr (evnt,ele){     var evnt
oninput事件、onchange事件和onpropertychange事件
和上帝躲猫猫
09-23 1503
1、onchange事件与onpropertychange事件的区别： onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。 2、oninput事件与onpropertychange事件的区别： oninput事件是IE之外的大多数浏览器支
JavaScript阻止浏览器默认行为与事件冒泡的详细实现及示例
在前端开发中，处理浏览器默认行为和事件冒泡是常见的需求，这有助于确保用户交互按照预期进行，特别是当涉及到表单提交、导航或特定元素的控制时。本文档提供了解决这些问题的JavaScript代码片段。 1. **阻止...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值