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

最新推荐文章于 2024-05-12 21:38:39 发布

原创最新推荐文章于 2024-05-12 21:38:39 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端小知识专栏收录该内容

9 篇文章

订阅专栏

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

1.event.stopPropagation()方法

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

2.event.preventDefault()方法

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

3.return false ；

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

evalost

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

阻止事件冒泡的方法、event.stopPropagation()、阻止默认行为、event.preventDefault()

imkaifan的博客

11-10

1526

1、event.stopPropagation() <body> <form id="form1" runat="server"> <div id="divOne" onclick="alert('我是最外层');"> <div id="divTwo" onclick="alert('我是中间层！')"> <a id="hr_three"

js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

10-26

1. **阻止默认事件**：当一个元素发生特定事件时，浏览器通常会执行一些默认的行为。例如，`<a>`标签点击后会跳转到指定的URL，`<button>`、`<input type="submit">`等表单元素会提交表单。`event.preventDefault...

参与评论您还未登录，请先登录后发表或查看评论

js阻止冒泡和默认事件（默认行为）详解

10-21

主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

javascript阻止事件冒泡的一种方法

03-25

一种解决事件冒泡的方法，有较好的浏览器兼容性，具体思路参见文档： http://blog.youkuaiyun.com/ivyandrich/article/details/22041933

Js阻止事件冒泡与阻止默认事件

qsj0606的博客

04-23

2695

Js阻止事件冒泡与阻止默认事件 1、event.stopPropagation()方法 event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法取消事件的默认动作。该方法将通

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

viana37的博客

03-03

639

在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] 1.阻止事件冒泡,使成为捕获型事件触发机制. 1 2 3 4 5 6 7 8 9 fun

浅谈js停止事件冒泡阻止浏览器的默认行为(阻止超连接 #)

12-12

在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e....

【JavaScript】阻止事件冒泡和默认行为

小秀的博客

05-12

3481

在JavaScript中，事件默认行为是指在特定的事件发生时浏览器自动执行的操作。form 元素的 action 属性值表单内容要提交的地址，而用户点击表单元素中嵌套的提交按钮时，就会有一个默认的提交操作。需要注意的是，不同的事件有不同的默认行为，因此阻止默认行为的方法可能会有所不同。方法用于阻止事件的进一步传播，而不是直接阻止事件的默认行为。也是 event的一个属性，表示默认行为是否被阻止，true 表示被阻止。方法用于阻止事件传播，而不是直接阻止事件的默认行为。可以阻止默认行为的执行。

javascript阻止冒泡和默认事件（默认行为）

fisher

10-12

1558

阻止冒泡。冒泡简单的举例来说，儿子知道了一个秘密消息，它告诉了爸爸，爸爸知道了又告诉了爷爷，一级级传递从而引起事件的混乱，而阻止冒泡就是不让儿子告诉爸爸，爸爸自然不会告诉爷爷了。下面的domo就是很好的例子。 #box{ width: 300px; height: 300px; background: red;

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

@宝藏男孩

04-12

1609

如何阻止事件冒泡，这里先拓展个知识点： DOM事件流存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 DOM标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome、Firefox、Safari等浏览器则同...

如何阻止事件冒泡和默认行为？

weixin_34376562的博客

11-30

243

1.背景介绍浏览器的事件发生顺序浏览器的事件发生顺序分为事件冒泡与事件捕获，分别由微软和网景公司提出。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> di...

详解javascript如何阻止冒泡事件及阻止默认事件

Sunny王维

09-13

1170

一、事件冒泡二、默认行为在说事件冒泡之前，我们先说说事件对象（Event） Event 1、在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息） 2、所有浏览器都支持Event对象，但支持方式不同 3、IE中的事件对象：window.event 一、事件冒泡什么是事件...

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

France_CG

04-06

136

阻止冒泡事件与默认事件什么是冒泡事件？例如，在应该按钮是绑定一个"click"事件，那么"click"事件会依次在它的父级元素中被触发防止冒泡和捕获 w3c的方法是e.stopPropagation() IE的方法是e.cancelBubble = true //阻止冒泡 window.event? window.event.cancelBubble = true : e.stopPropagation(); 取消默认事件 w3c的方法是e.preventDefault() IE的方法是e.ret

JS阻止冒泡和取消默认事件(默认行为)

LuckFairyLuckBaby的博客

03-16

482

原文链接：http://caibaojian.com/javascript-stoppropagation-preventdefault.html

JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器

weixin_46106512的博客

03-29

5831

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、阻止事件冒泡和默认行为二、拖拽1, 实现拖拽相关的三大事件:2, 实现拖拽思路：1, 给目标元素添加onmousedown事件(鼠标按下事件)2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:3, 在onmousedown事件(鼠标按下事件)发生以后，给document.

JS阻止冒泡事件和默认事件（IE和其他浏览器兼容）

liona_koukou的博客

11-18

6073

冒泡事件：比如我们点击了一个元素然后从它本身开始一层一层向上的父元素都做出反应直到根元素默认事件：像a标签的点击跳转和页面鼠标右键单击弹出菜单等都是默认事件我们有时想要阻止这些事件需要注意的是IE浏览器和其他浏览器的兼容问题代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta ...

阻止事件冒泡和默认行为

LOVE__YING的博客

03-21

360

事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。默认行为浏览器的一些默认的行为。例如...

阻止事件冒泡和默认事件的区别

最新发布

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()` - 两者可独立使用，也可根据需求组合使用。