js阻止事件冒泡和默认事件

最新推荐文章于 2024-05-12 21:38:39 发布
原创 最新推荐文章于 2024-05-12 21:38:39 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了三种关键的事件处理方法：event.stopPropagation(), event.preventDefault() 和 return false; 分别介绍了它们的功能，包括阻止事件冒泡、阻止默认事件以及同时实现两者的功能。了解这些技巧对于前端开发人员至关重要。

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

1.event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个链接，这个链接仍然会被打开，

2.event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3.return false  ；

这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，链接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

Js阻止事件冒泡与阻止默认事件
weixin_44562686的博客
12-15 2380
1、event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 event.isPropagationStopped()方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法 取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联
js阻止冒泡和默认事件（默认行为）详解
10-21
主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript阻止事件冒泡和浏览器的默认行为
viana37的博客
03-03 616
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF]   1.阻止事件冒泡,使成为捕获型事件触发机制. 1 2 3 4 5 6 7 8 9 fun
【JavaScript】阻止事件冒泡和默认行为
小秀的博客
05-12 3342
在JavaScript中，事件默认行为是指在特定的事件发生时浏览器自动执行的操作。form 元素 的 action 属性值表单内容要提交的地址，而用户点击表单元素中嵌套的提交按钮时，就会有一个默认的提交操作。需要注意的是，不同的事件有不同的默认行为，因此阻止默认行为的方法可能会有所不同。方法用于阻止事件的进一步传播，而不是直接阻止事件的默认行为。也是 event的一个属性，表示默认行为是否被阻止，true 表示被阻止。方法用于阻止事件传播，而不是直接阻止事件的默认行为。可以阻止默认行为的执行。
javascript阻止冒泡和默认事件（默认行为）
fisher
10-12 1536
阻止冒泡。冒泡简单的举例来说，儿子知道了一个秘密消息，它告诉了爸爸，爸爸知道了又告诉了爷爷，一级级传递从而引起事件的混乱，而阻止冒泡就是不让儿子告诉爸爸，爸爸自然不会告诉爷爷了。下面的domo就是很好的例子。 #box{ width: 300px; height: 300px; background: red;
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
10-26
1. **阻止默认事件**： 当一个元素发生特定事件时，浏览器通常会执行一些默认的行为。例如，`<a>`标签点击后会跳转到指定的URL，`<button>`、`<input type="submit">`等表单元素会提交表单。`event.preventDefault...
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
12-12
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e....
如何阻止事件冒泡和默认行为？
weixin_34376562的博客
11-30 222
1.背景介绍浏览器的事件发生顺序 浏览器的事件发生顺序分为事件冒泡与事件捕获，分别由微软和网景公司提出。 事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。 因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> di...
JS 阻止事件冒泡和默认事件
@宝藏男孩
04-12 1575
如何阻止事件冒泡，这里先拓展个知识点： DOM事件流存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 DOM标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome、Firefox、Safari等浏览器则同...
JavaScript阻止冒泡事件和默认事件
France_CG
04-06 124
阻止冒泡事件与默认事件 什么是冒泡事件？例如，在应该按钮是绑定一个"click"事件，那么"click"事件会依次在它的父级元素中被触发 防止冒泡和捕获 w3c的方法是e.stopPropagation() IE的方法是e.cancelBubble = true //阻止冒泡 window.event? window.event.cancelBubble = true : e.stopPropagation(); 取消默认事件 w3c的方法是e.preventDefault() IE的方法是e.ret
详解javascript如何阻止冒泡事件及阻止默认事件
Sunny王维
09-13 1073
一、事件冒泡 二、默认行为 在说事件冒泡之前，我们先说说事件对象（Event） Event 1、在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息） 2、所有浏览器都支持Event对象，但支持方式不同 3、IE中的事件对象：window.event 一、事件冒泡 什么是事件...
JS阻止冒泡和取消默认事件(默认行为)
LuckFairyLuckBaby的博客
03-16 468
原文链接：http://caibaojian.com/javascript-stoppropagation-preventdefault.html
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
weixin_46106512的博客
03-29 5712
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、阻止事件冒泡和默认行为二、拖拽1, 实现拖拽相关的三大事件:2, 实现拖拽思路：1, 给目标元素添加onmousedown事件(鼠标按下事件)2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:3, 在onmousedown事件(鼠标按下事件)发生以后，给document.
JS阻止冒泡事件和默认事件（IE和其他浏览器兼容）
liona_koukou的博客
11-18 6050
冒泡事件：比如我们点击了一个元素然后从它本身开始一层一层向上的父元素都做出反应直到根元素 默认事件：像a标签的点击跳转和页面鼠标右键单击弹出菜单等都是默认事件 我们有时想要阻止这些事件需要注意的是IE浏览器和其他浏览器的兼容问题 代码如下：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta ...
阻止事件冒泡和默认行为
LOVE__YING的博客
03-21 339
事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 默认行为 浏览器的一些默认的行为。例如...
JS阻止事件冒泡和默认事件
xxx割喉的博客
04-21 429
当事件发生后，这个事件就要开始传播（从里到外，或者从外向里）。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，或处理事件的函数并未绑定在该事件源上。如下图：我们经常利用事件冒泡机制去减少给DOM添加过多的绑定事件即。
JS阻止冒泡和元素默认事件
qq_46275230的博客
04-24 364
JS阻止冒泡和元素默认事件 文章目录JS阻止冒泡和元素默认事件1.JS阻止冒泡 :stopPropagation()2.阻止元素默认事件行为preventDefault()onclick + return false接管行为 1.JS阻止冒泡 :stopPropagation() <body> <div class="wrap"> <div class="inner"></div> </div> <script> le
阻止事件冒泡和默认事件的区别
最新发布
03-29
<think>嗯，用户问的是阻止事件冒泡和阻止默认事件的区别。我需要先回忆一下这两个概念的具体含义，然后找出它们的区别和应用场景。 首先，事件冒泡是DOM中的事件传播机制，比如点击一个子元素，事件会向上级父元素逐层触发。阻止冒泡就是让事件不再继续上传，比如在子元素处理完事件后，不让父元素接收到这个事件。常用的是event.stopPropagation()方法。 然后是默认事件，指的是浏览器对某些元素的默认行为，比如点击链接会跳转，表单提交会刷新页面。阻止默认事件就是取消这些默认行为，使用event.preventDefault()方法。 需要区分两者的使用场景。比如，如果一个链接绑定了点击事件处理函数，但不想让点击后跳转，就要阻止默认事件。而如果同一个页面上有多个嵌套元素绑定点击事件，可能需要在某个子元素处理完后阻止冒泡，避免父元素的事件处理函数被触发。 可能用户在实际开发中遇到了事件重复触发或者默认行为干扰的问题，需要明确这两个方法的区别。要确保回答结构清晰，用例子说明，避免混淆。 还要注意使用中文，按照系统级指令正确使用LaTeX格式，但这里可能用不上数学表达式。重点在于逻辑清晰，步骤分明，帮助用户理解两者的区别和应用。</think>### 阻止事件冒泡和默认事件的区别 #### 1. **事件冒泡（Event Bubbling）** - **定义**：事件从触发它的最深层元素（目标元素）开始，逐层向上传播到父元素的过程。 - **阻止方法**：调用 `event.stopPropagation()`。 - **作用**：**仅阻止事件向父级传播**，不影响当前元素的事件处理逻辑或默认行为。 - **使用场景**： 例如，当子元素和父元素都绑定了点击事件时，若希望子元素触发后父元素不响应： ```javascript document.getElementById("child").addEventListener("click", function(event) { event.stopPropagation(); // 父元素不会收到此点击事件 console.log("子元素被点击"); }); ``` #### 2. **默认事件（Default Event）** - **定义**：浏览器对某些元素预设的行为（如点击链接跳转、表单提交刷新页面）。 - **阻止方法**：调用 `event.preventDefault()`。 - **作用**：**仅取消浏览器默认行为**，不阻止事件传播。 - **使用场景**： 例如，阻止表单自动提交或禁止链接跳转： ```javascript document.querySelector("a").addEventListener("click", function(event) { event.preventDefault(); // 阻止链接跳转，但事件仍会冒泡到父元素 console.log("链接点击被阻止"); }); ``` --- #### 3. **核心区别** | **特性** | 阻止事件冒泡 (`stopPropagation`) | 阻止默认事件 (`preventDefault`) | |-------------------|---------------------------------------|---------------------------------------| | **影响范围** | 阻止事件向上传播 | 取消浏览器默认行为 | | **事件是否执行** | 当前元素的事件仍会触发 | 当前元素的事件仍会触发 | | **典型用例** | 避免父级元素触发相同事件 | 阻止表单提交、链接跳转等 | --- #### 4. **联动使用示例** ```javascript document.querySelector("button").addEventListener("click", function(event) { event.preventDefault(); // 阻止表单提交（默认行为） event.stopPropagation(); // 阻止事件冒泡到父容器 console.log("按钮点击被处理"); }); ``` - **效果**： - 表单不会提交 - 父容器的点击事件不会被触发 --- #### 5. **总结** - 若需 **隔离事件传播**，用 `event.stopPropagation()` - 若需 **禁用浏览器默认行为**，用 `event.preventDefault()` - 两者可独立使用，也可根据需求组合使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值