JS：event.stopPropagation(); 阻止冒泡的注意点

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

本文介绍了在前端开发中如何有效使用stopPropagation方法来阻止事件冒泡，避免事件处理过程中的层级干扰。通过示例代码展示了如何在特定元素上阻止事件向上冒泡至父级元素，确保了更精确的事件控制。

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

① 不能阻止父级的父级，只能阻止父级

②oncclick的c是小写

③onclick="stopPropagation()" 以及 function stopPropagation() 的括号里有无 event 不影响。

 

示例代码：

<div class="col-md-3" onclick="into()">

                        <div class="img"></div>

                        <div class="eachPhotoButton" style="margin-top:5px;" onclick="stopPropagation()">

                                <button class="btn btn-xs btn-warning revise" >编辑</button>

                                <button class="btn btn-xs btn-warning delete" style="float: right;">删除</button>

                        </div>

 </div>

 

 

function stopPropagation() { //阻止冒泡

event.stopPropagation();

}

event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？如何知道是否在元素中使用了event.preventDefault()方法？
liuhao9999的博客
03-22 1212
event.preventDefault()方法可防止元素的默认行为。如果在表单元素中使用，它将阻止其提交。如果在锚元素中使用，它将阻止其导航。如果在上下文菜单中使用，它将阻止其显示或显示。event.stopPropagation()方法用于阻止捕获和冒泡阶段中当前事件的进一步传播。 我们可以在事件对象中使用event.defaultPrevented属性。它返回一个布尔值用来表明是否在特定元素中调用了event.preventDefault()。 ...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
如果你尝试使用`return false`或`event.stopPropagation()`，它们可能在这样的情况下不起作用，因为Vue已经对事件处理进行了优化，使得直接在模板中定义的函数不能直接访问到`event`对象。 此外，Vue还提供了其他...
js中的preventDefault与stopPropagation详解
12-12
首先讲解一下js中preventDefault和stopPropagation两个方法的区别：preventDefault方法的起什么作用呢？我们知道比如<a>百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就明白了： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
关于js中事件的event.stopPropagation()方法的理解与举例说明
热门推荐
zhizhan888的博客
12-22 1万+
这里有你想要的JavaScript事件的触发原理，stopPropagation()方法的使用，欢迎大家来讨论，一起相互学习，一起进步
事件流--阻止事件冒泡
最新发布
weixin_51341142的博客
07-04 509
摘要：本文介绍了DOM事件流的两个阶段（捕获和冒泡）及其特点。事件捕获从根元素向内触发（需手动设置），而事件冒泡默认存在，由当前元素向外传播。通过addEventListener的第三个参数控制触发阶段。文章重点讲解了如何用stopPropagation()阻止事件冒泡，并提供了完整示例代码：当点击子元素时只触发子元素事件，不触发父元素事件。事件冒泡是实际开发中的主要应用方式。
js中的preventDefault和stopPropagation
weizuqing的专栏
01-07 269
首先讲解一下js中preventDefault和stopPropagation两个方法的区别： preventDefault方法的起什么作用呢？我们知道比如百度,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就...
JS stopPropagation()
ssisse的博客
04-23 2254
本文转自：http://www.365mini.com/page/jquery-event-stoppropagation.htm和慕课网 jQuery Event.stopPropagation() 函数详解 1，概念先知   （一）事件流概念：      事件流描述的是从页面中接受事件的顺序。       1、事件冒泡    
js 说一下event.stopPropagation()的内部实现
ivan5277的博客
04-11 757
内部的状态，通常这个状态是一个标志位，标记事件是否应该继续传播。当调用此方法时，它会将该标志位设置为阻止传播，浏览器在内部进行事件循环处理时检测到这一标志，就会停止对该事件的进一步处理，无论是事件捕获还是事件冒泡阶段都会受到影响。对象的一个实例方法，主要作用是在事件处理过程中阻止事件的进一步传播，即阻止事件向上冒泡到父元素或者向下捕获到其他更低层级的元素。实际的浏览器实现会更加复杂，涉及到更多的优化和跨平台兼容性处理，但基本思想就是通过改变事件对象的内部状态来控制事件传播的行为。
Jquery阻止事件冒泡 event.stopPropagation
10-28
值得注意的是，`event.stopPropagation()`并不会阻止同一元素上其他事件处理函数的执行。因此，如果同一元素上有多个事件处理器，它们仍然会被依次调用。 另外，对于`.live()`（已废弃）和`.delegate()`方法创建的...
关于event.cancelBubble和event.stopPropagation()的区别介绍
09-05
但在 Firefox 3.6.4 中，`event.cancelBubble` 虽然返回 `true`，但并未真正阻止冒泡。 另一方面，`event.stopPropagation()` 是 W3C 标准的事件模型中定义的方法，它在所有现代浏览器（包括 Firefox、Chrome 和 ...
TypeError: e.stopPropagation is not a function
04-11
Uniapp 支持通过 **事件修饰符** 阻止冒泡，无需手动调用方法： - **正确写法**： ```html <button @click.stop="handleClick">点击 ``` 使用 `@事件名.stop` 修饰符（如 `@click.stop`）自动阻止事件冒泡[^1]。...
event.stopPropagation()
PhperX的博客
10-22 1075
event.stopPropagation()函数详解 概念说的太格式化，直接看下面自己解析，清晰明了： 例子： 1.给子节点绑定点击事件 $("#myButton").click(function(ev){ alert(“点击子节点”); }) 2.给body绑定点击事件 $(“body”).click(function(evt){ alert(“父节点”); }) 当点击按钮时会触发这两个节点...
jquery的冒泡事件event.stopPropagation()
pingguonjb的专栏
07-07 944
jquery的冒泡事件event.stopPropagation() (2011-08-27 09:12:20)   分类： JS与网页特效 js中的冒泡事件与事件监听 冒泡事件 js中“冒泡事件”并不是能实际使用的花哨技巧，它是一种对js事件执行顺序的机制，“冒泡算法”在编程里是一个经典问题，冒泡算法里面的冒泡应该说是交换更加准确；j
event stopPropagation()
qq 117791303
12-31 345
event.stopPropagation(); 它在这里的作用就是，父窗口DivMain和子窗口DivDrag都有单击事件的时候， 如果子窗口单击事情不添加阻止冒泡的话，当自己的逻辑执行完就会继续执行父窗口单击事件。 也就是 执行完 clickDiv 事件，他会执行 clickDivMain 方法。 可是我这里是想获取子窗口的坐标和宽度，如果不阻止，他就会获取父窗口的坐标和宽度了。 ...
javascript ——stopImmediatePropagation，stopPropagation
weixin_38278993的博客
11-19 1913
在事件处理程序中，每个事件处理程序中间都会有一个event对象，而这个event对象有两个方法，一个是stopPropagation方法，一个是stopImmediatePropagation方法，两个方法只差一个Immediate，这里就说说这两个方法的区别 　　1、stopImmediatePropagation方法： 　　　　stopImmediatePropagation方法作用在当前...
深入理解EventTarget中的属性event.stopPropagation()
zhengsr12345的博客
11-25 559
可以看到，事件捕获（设置capture属性为true）先于事件冒泡（capture默认是false）。很多人粗略地认为该属性只是阻止冒泡，实际上，正如其英文含义，它只是用来阻止事件传播，不管是事件冒泡阶段还是事件捕获阶段都可阻止进一步传播。综上，我们可得出结论，event.stopPropagation()既可阻止事件冒泡也可阻止事件捕获。我们会发现事件捕获在out这个div处就被截断，并且同时截断了事件冒泡的整个阶段。可以看到事件冒泡在in这个div处被截断，而事件捕获阶段不变。再次点击in这个div，
js的stopPropagation()、cancelBubble、preventDefault()、return false的分析
waiting_area的博客
03-09 894
事件冒泡，举个列子： <li> <a href='http://www.baidu.com'>点击a</a> </li> <script> $('li').click(function () { alert('点击了li'); }); $('a').click(function () { alert('点击了a'); }); </script> 当你点击a的时
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值