div的子元素的点击事件会触发父元素的点击事件（阻止事件冒泡）

最新推荐文章于 2024-06-19 17:31:34 发布
转载 最新推荐文章于 2024-06-19 17:31:34 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/Abbey_qi/article/details/100012367

本文介绍了一个简单的HTML示例，展示了如何使用JavaScript的event.cancelBubble属性来阻止点击事件从子元素冒泡到父元素。这对于理解事件处理机制和实现特定的交互逻辑非常有用。

问题：
给一个很简单的例子，当点击第二个div的时候，会同时触发此div与其父元素的点击事件，按照官方的说法，这是事件的浮升，那么要怎么阻止这种情况呢？

<div οnclick="alert();">
    <div οnclick="alert();"></div>
</div>
解决方案：
使用 event.cancelBubble=true;

<div οnclick="alert();">
    <div οnclick="alert();event.cancelBubble=true;"></div>
</div>

在Vue中如何不处理内部元素触发的事件？
重楼的博客
10-07 931
在Vue中如何不处理内部元素触发的事件？方法一 事件修饰符.self方法二 事件修饰符.stop方法三 event.target 方法一 事件修饰符.self <div class="mask" @click.self="close"> <div class="mask-content"></div> </div> 方法二 事件修饰符.stop <div class="mask" @click="close"> &lt
在点击div中的p时，如何阻止事件冒泡
08-31
在这个过程中，如果父元素和子元素都绑定了同一个事件处理函数，那么当子元素的事件触发时，其父元素的事件处理函数也会被调用。在某些情况下，我们可能不希望事件继续向上冒泡，而是只想在当前元素上执行相应操作，...
div的子元素的点击事件会触发父元素的点击事件（禁用事件的浮升）
Abbey_qi的博客
08-22 4152
问题： 给一个很简单的例子，当点击第二个div的时候，会同时触发此div与其父元素的点击事件，按照官方的说法，这是事件的浮升，那么要怎么阻止这种情况呢？ <div onclick="alert();"> <div onclick="alert();"></div> </div> 解决方案： 使用 event.cancelBubble...
点击子元素事件不触发父元素事件
05-12
点击子元素，触发子元素事件的同时不触发父元素的时间
点击子元素却也触发父元素的点击事件
热门推荐
我的博客
02-24 2万+
在前端开发时，经常出现父元素有点击事件，子元素也有点击事件，在点击子元素时却会把父元素的点击事件也触发，这种情况叫做事件冒泡，解决的方案有很多种，这里记录一下比较常用，比较好用的一种解决方案 HTML 代码   父元素 &lt;div id="father" style="width:600px;height:400px;border:1px solid black;"&gt;&lt;...
Html- 阻止子元素事件触发父元素事件（事件冒泡）
qq_26318597的博客
09-08 1072
不要冒泡啦
阻止子元素继承父元素事件具体思路及实现
12-09
在给定的标题和描述中，我们面临的问题是希望阻止子元素`#p_cont`继承父元素`#p_box`的事件，即在点击`#p_cont`时不会触发`#p_box`上的`a`事件。 首先，来看原始的HTML结构和事件绑定： ```html <div id="p_box" ...
vue中阻止click事件冒泡,防止触发另一个事件的方法
08-28
例如，当一个元素上有一个点击事件监听器时，如果该元素内部的子元素也有点击事件，点击子元素会同时触发父元素的事件。这种现象称为事件冒泡，是DOM事件处理中的常见特性。为了阻止这种情况发生，Vue提供了`.stop`...
点击子组件时阻止父组件事件
最新发布
07-03
举个例子，假设我们有一个父元素`<div id="parent">`和一个子元素`<button id="child">`，我们不希望点击按钮时触发父元素的点击事件。我们可以在子按钮的点击事件处理函数中加入`e.stopPropagation()`： ```...
获取触发父元素事件的子元素
PanDa____的博客
06-19 552
获取触发事件DOM
Vue 子组件触发父组件事件,传递多个参数以及异常情况处理
lazy_tomato的博客
05-08 1528
父组件定义接收的事件时，添加括号会导致$emit的传参无法接收到。上述的示例其实就是一个最基础的，子组件触发父组件事件的代码。事件名称不会类似组件名，prop；的事件名和父组件接收的事件名必须相同。官方文档对这里了的做了说明，并且推荐用。
子元素的点击事件出发了父元素的滑入滑出事件
阿毛的博客
05-31 536
一开始没发现是什么问题，后来进过多方排查，总之就是判断出了是子元素点击的时候出发了父元素的滑入滑出事件。 我就纳闷了，为什么点击事件会影响划过滑出事件。 百度了一下，试了很多方法，就是用阻止冒泡解决的。简化一下模型大概就是这么解决的： html: <div id="father"> <span id="son"></span> </div> j...
addEventListener方法和on的区别
weixin_49346957的博客
11-05 1010
on事件 Javascript中可以对一些页面的事件设定触发值 , 例如常用的点击click 鼠标移动onmousemove等等,可以对其设定值来实现事件触发后执行的操作 addEventListener()方法 addEventListener(‘click’,function,Boolean) 参数click表示监听事件 : click等,就是之前不加前缀 on 的事件(必写) 参数function表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数(必写) 参数Boole
解决div中嵌套元素时，二者点击事件同时触发
weixin_30883311的博客
12-06 910
以Angualr为例： <div class="previewImg" (click)="closeImg()"> <img id="leftArrow" *ngIf="mid > left" (click)="leftImg($event)" src="../../../assets/community/leftArrow@3x.png"/> ...
解决 父层div和子层div点击事件冲突 （冒泡触发的小方法）
qq_36423909的博客
08-10 7594
父模块和子模块点击事件（冲突解决方案）： HTML代码：         JS 代码： //父亲点击事件 $scope.parentClick = function () { } //孩子点击事件 $scope.childClick = function (event) {     event.stopPropagation();//终止事件冒泡
解决父子层div存在点击事件冲突的问题
qq_45735918的博客
10-25 721
只执行子层方法。在子层方法中加入以上代码，父层方法便不会执行。
vue外层div上有点击事件，内层div也有点击事件，想要实现点 内层div，不触发外层点击事件（综合一下记录）
Winsom1的博客
06-15 5561
综合笔记，感谢原作者
jq 阻止事件冒泡（点击子级＜div＞不触发父级＜div＞）
BlizzardWu的博客
06-25 1100
1:关于事件冒泡 事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。） 2:如何避免冒泡 1: 使用 event.cancelBubble=true; <div class="box1" id="box1" onclick="change_cong(2)" > <div class="box2" id="bo
Vue的事件处理，点击事件
qq_46149597的博客
11-03 1万+
vue点击事件，事件处理：事件修饰符、按键修饰符、鼠标修饰符、v-bind修饰符、v-model修饰符
点击父元素，子元素的事件不触发
06-27
在处理 DOM 元素嵌套结构时，点击父元素导致子元素的事件未触发，或者相反的问题，通常与事件冒泡机制有关。以下是几种常见的解决方法： ### 1. 使用 `event.stopPropagation()` 阻止事件冒泡 当希望子元素的事件独立于父元素执行时，可以在子元素的事件处理函数中使用 `event.stopPropagation()` 来阻止事件向上传播到父元素。 ```javascript document.querySelector('.child').addEventListener('click', function(e) { e.stopPropagation(); // 子元素的具体操作 }); ``` 通过这种方式，可以确保子元素的点击事件不会触发父元素的事件处理程序 [^2]。 --- ### 2. 利用 `event.target` 和 `event.currentTarget` 区分事件目标 在事件处理函数中，可以通过 `event.target`（实际被点击的元素）和 `event.currentTarget`（绑定事件的元素）来判断事件的来源，并根据需求分别处理。 ```javascript document.querySelector('.parent').addEventListener('click', function(e) { if (e.target === e.currentTarget) { // 只有点击到父元素本身时才执行 console.log('父元素被点击'); } else { // 点击的是子元素时的逻辑 console.log('子元素被点击'); } }); ``` 该方式特别适用于需要区分点击是发生在父元素还是其子元素上的场景 [^1]。 --- ### 3. Vue 中使用 `.stop` 修饰符阻止事件传播 在 Vue 的模板语法中，可以直接使用 `.stop` 修饰符来阻止事件冒泡。例如，在子元素上添加 `.stop`，以防止点击子元素时触发父元素的事件。 ```html <div class="parent" @click="handleParentClick"> <button class="child" @click.stop="handleChildClick">点击我</button> </div> ``` 这样即使子元素位于父元素内部，也不会影响到父元素的事件响应 [^2]。 --- ### 4. 判断元素层级关系进行条件执行 如果子元素覆盖了父元素，可以通过检查 `event.target` 是否属于某个特定的父级结构，决定是否执行相关逻辑。 ```javascript document.querySelector('.parent').addEventListener('click', function(e) { const isChildClicked = e.target.closest('.child'); if (isChildClicked) { console.log('子元素或其后代被点击'); } else { console.log('父元素区域被点击'); } }); ``` 此方法适用于复杂的 DOM 结构，能够更精确地控制事件行为 [^3]。 --- ### 5. 使用 CSS pointer-events 控制元素是否响应鼠标事件 在某些情况下，可以通过 CSS 设置 `pointer-events` 属性来控制子元素是否接收鼠标事件，从而间接影响父元素的行为。 ```css .child { pointer-events: auto; /* 默认值，允许响应事件 */ } .parent { pointer-events: auto; } ``` 如果想临时禁用子元素的交互，可以设置为 `none`，让事件穿透到父元素 [^3]。 --- ### 总结 - 如果希望子元素的事件不触发父元素的逻辑，可以使用 `e.stopPropagation()` 或 Vue 的 `.stop` 修饰符。 - 如果需要区分点击对象，建议使用 `event.target` 和 `event.currentTarget` 进行判断。 - 对于复杂的 DOM 嵌套，结合 `closest()` 方法可以实现更精准的事件控制。 - 在样式层面也可以借助 `pointer-events` 实现对事件响应的精细管理。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值