Html- 阻止子元素事件触发父元素事件（事件冒泡）

最新推荐文章于 2025-09-10 23:05:08 发布

牙膏上的小苏打2333

最新推荐文章于 2025-09-10 23:05:08 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页前端 Html 文章标签： js html 冒泡事件

本文链接：https://blog.csdn.net/qq_26318597/article/details/126761692

网页前端同时被 2 个专栏收录

17 篇文章

订阅专栏

Html

17 篇文章

订阅专栏

博客讨论了在HTML中遇到的一个问题：点击输入框(input)时，同时触发了包含它的div的点击事件。作者提供了解决方案，即通过在input上设置`event.cancelBubble=true`来阻止事件冒泡，从而防止div的点击事件被触发。这是一个关于前端开发中事件处理的常见问题解决实例。

🛴消除干扰~

   <div id="inputContaniner"   onclick="CloseInput()" >
        <input type="text">
    </div>

如上所示，但点击了input也会触发 div的点击事件！！🙈

在input上添加取消冒泡即可解决（event.cancelBubble = true）

   <div id="inputContaniner"   onclick="CloseInput()" >
        <input type="text" onclick="event.cancelBubble = true">
    </div>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

牙膏上的小苏打2333

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

html如何点击子元素事件而不触发父元素的点击事件

kerryqpw的博客

07-31

2万+

html如何点击子元素事件而不触发父元素的点击事件

HTML应用开发基础篇 - 函数（阻止事件的冒泡）

徐小mu的博客

12-17

291

一个完整的 JS 事件流是从 window 开始，最后回到 window 的一个过程。addEventListener 的第三个参数，指定是（true）时响应还是冒泡时（false）响应事件，默认为 false 。而阻止事件的冒泡有方法：event.stopPropagation(); 和 event.cancelable=true ; 不建议使用后者。先看个简单的例子，三个叠加一起的图形，每...

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

点击子元素事件不触发父元素事件

05-12

点击子元素，触发子元素事件的同时不触发父元素的时间

彻底解决事件冒泡难题：HTMX中consume修饰符的实战指南

gitblog_00171的博客

09-10

311

你是否曾在开发HTMX应用时遇到事件冒泡导致的诡异问题？点击一个按钮却触发了多个元素的事件处理，或者嵌套组件间的事件干扰让交互逻辑陷入混乱？这些问题往往源于对事件传播机制的不完全掌控。本文将深入解析HTMX中阻止事件冒泡的终极解决方案——**consume修饰符**，通过具体代码示例和实际应用场景，帮你彻底掌握这一关键技术点，让事件处理变得清晰可控。 ## 事件冒泡与HTMX的天然矛盾在We...

js 事件冒泡是什么如何用jquery阻止事件冒泡

weixin_34318326的博客

12-03

264

什么是事件起泡：一个事件不能凭空产生，这就是事件的发生等等，接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证，感兴趣的朋友可以参考下哈（1）什么是事件起泡首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。当事件发生后，这个事件就要开始传播。为什么要...

div的子元素的点击事件会触发父元素的点击事件（禁用事件的浮升）

Abbey_qi的博客

08-22

4141

问题：给一个很简单的例子，当点击第二个div的时候，会同时触发此div与其父元素的点击事件，按照官方的说法，这是事件的浮升，那么要怎么阻止这种情况呢？ <div onclick="alert();"> <div onclick="alert();"></div> </div> 解决方案：使用 event.cancelBubble...

事件委托与阻止冒泡阻止其父元素事件触发

09-04

在JavaScript事件处理...阻止冒泡则是通过`event.stopPropagation()`方法来控制事件流，使得事件仅在当前元素内处理，不向上冒泡到父元素。这两种技术结合使用，能够更好地管理和控制网页上的事件交互，提升用户体验。

阻止子元素继承父元素事件具体思路及实现

12-09

在给定的标题和描述中，我们面临的问题是希望阻止子元素`#p_cont`继承父元素`#p_box`的事件，即在点击`#p_cont`时不会触发`#p_box`上的`a`事件。首先，来看原始的HTML结构和事件绑定： ```html ()"> ``` ...

点击子元素事件不触发其父元素事件

热门推荐

我的博客

02-24

2万+

在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较好用的一种解决方案 HTML 代码 父元素 <div id="father" style="width:600px;height:400px;border:1px solid black;"><...

html点击子元素事件而不触发父元素的点击事件—阻止冒泡

Demon's blog

07-30

5762

//1.利用stopPropagation方法 element.onclick=function (e) { todo something; e.stopPropagation();//阻止事件冒泡即可 } //不再派发事件。 //终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 //2.或者直接返回false： element.onclick=function (e) { .

html中怎么样阻止事件冒泡,6.13阻止事件冒泡.html

weixin_31935149的博客

06-08

712

#box1{width: 300px;height: 300px;margin: 0 auto;background-color: red;}#box2{width: 200px;height: 200px;margin: 50px auto;background-color: blue;}#box3{width: 100px;height: 100px;margin:100px auto;ba...

阻止事件冒泡

Idpd_的博客

01-12

515

阻止事件冒泡

阻止子元素的事件冒泡到父元素

houshufen

12-26

1257

在项目中我们常常遇到这样一个问题：就是一个父元素里面有很多子元素，父元素和子元素都会有点击事件，当我们点击子元素的时候，不希望触发父元素的点击事件。案例：购物车列表，想要点击增加或减少按钮时不希望触发父元素的点击事件进入详情页。在子元素的点击事件中加入： //阻止click事件冒泡到父元素 event.stopPropagation(); 这样问题就解决啦。 ...

Html冒泡与阻止

dengyi4623的博客

10-21

432

一、什么是事件冒泡 W3C DOM Level2的事件模型规范中，事件在DOM树中的传播过程（从根节点到目标节点）被分为了两个阶段：捕捉（Capture）和冒泡（Bubbling）。下面这个图能大概的说明整个过程： W3C 事件冒泡图如果想创建一个捕捉事件，在支持W3C 事件模型的浏览器中，将addEventListener的第三个参数设为true就好了。例如： ...

事件冒泡，阻止事件冒泡

wuyan_xingchen的博客

06-06

404

什么是事件冒泡，怎么阻止事件冒泡冒泡 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head&g

Vue 子组件触发父组件事件,传递多个参数以及异常情况处理

lazy_tomato的博客

05-08

1519

父组件定义接收的事件时，添加括号会导致$emit的传参无法接收到。上述的示例其实就是一个最基础的，子组件触发父组件事件的代码。事件名称不会类似组件名，prop；的事件名和父组件接收的事件名必须相同。官方文档对这里了的做了说明，并且推荐用。

73-(事件)阻止事件冒泡

我们的目标是星辰大海！

09-17

218

73-(事件)阻止事件冒泡

uniapp 小程序端点击子元素不触发父元素事件

03-11

在Uniapp小程序中解决点击子元素触发父元素事件的问题，可以通过阻止事件冒泡实现。以下是具体步骤和解决方案： --- ### 一、事件冒泡机制分析 1. 父元素事件默认通过**事件冒泡**触发[^1]。 2. 当子元素触发事件...