点击子元素时不触发父元素的点击事件，阻止事件向父层冒泡

最新推荐文章于 2022-06-01 16:33:04 发布

多么不容易

最新推荐文章于 2022-06-01 16:33:04 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 子元素不触发父元素

本文链接：https://blog.youkuaiyun.com/qq_28466271/article/details/81532303

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在JavaScript中处理子元素点击事件的方法，并演示了如何通过使用`event.stopPropagation()`来阻止点击事件冒泡到父元素。这种方法对于实现复杂的用户交互非常有用。

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

//子元素点击事件
document.getElementById("anyel").addEventListener("click",function(e){
    //屏蔽父层点击事件
    e.stopPropagation();
    //子层点击事件的 业务...
    ...
});

小卜，不要抄我代码！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

多么不容易

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

05-12

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

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

01-21

简单说下事件委托与阻止冒泡 html: <ul class=clearfix data-type=cityPick> <li class=active_sort_opts data-id=0>全部</li> <li data-id=88>纽约</li> <li data-id=119>洛杉矶</li> <li data-id=138>拉斯维加斯</li> <li data-id=84>夏威夷</li> <li data-id=120>旧金山</li> <li data-id=105>奥兰多</li> <li data-id=118>西雅图</li>

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

解决：点击子元素（子元素自己也绑定了事件）不触发父元素绑定的事件

chouchilei5210的博客

06-17

1004

问题代码： <div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;"> 父元素 <div class="elementII" style="heigh...

阻止checkbox的父元素事件冒泡

过客阵营 -- 简单的就要最简单

01-15

3701

今天在开发后台权限管理时使用了tinyaccordion 这个小控件,如图所示这个结构代码大致如下: 在过程中长时间纠结于,点击标注的checkbox也会触发其父元素H3的click事件, 起初对checkbox是监听其 change 事件,不管怎么搞,H3的click事件都会被触发,折腾了3个多小时,使用了各种方法都不行,几乎是把这个小控件完全自己实现了一遍都没有搞定这个问题...

点击子元素，不触发父元素，catchtap 阻止事件冒泡

lovelyYou123的博客

06-01

367

wxml:

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

12-09

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

在点击div中的p时，如何阻止事件冒泡

08-31

在这个过程中，如果父元素和子元素都绑定了同一个事件处理函数，那么当子元素的事件触发时，其父元素的事件处理函数也会被调用。在某些情况下，我们可能不希望事件继续向上冒泡，而是只想在当前元素上执行相应操作，...

点击子组件时阻止父组件事件

最新发布

07-03

举个例子，假设我们有一个父元素`<div id="parent">`和一个子元素`<button id="child">`，我们不希望点击按钮时触发父元素的点击事件。我们可以在子按钮的点击事件处理函数中加入`e.stopPropagation()`： ```...

防止点击子元素触发父元素的点击事件

qq_30554229的博客

04-24

3184

$(document).on("click", ".A .B", function(e){ e.preventDefault();//阻止浏览器默认行为 e.stopPropagation();//阻止事件冒泡 return false;});$(document.on("click", ".A", function(){ alert(0);)};...

react 阻止事件冒泡

山外小楼

03-02

1529

当我们在一个div 父级盒子有点击事件，子级也有点击事件时，不想点击子级事件触发父级事件就需要做阻止冒泡处理。 import React, { useState} from 'react' function Model(){ const clickShowModel=(event,props)=>{ event.stopPropagation(); } ...

react中父传子，子传父和非父子通信

zhangyiyang111的博客

05-12

305

一.父子组件之间通信 1.父传子父组件: 通过自定义属性进行传值子组件: 通过this.props接收数据父组件 import React, { Component } from 'react' import Child from './Child' export default class Parent extends Component { state = { name:'赵丽颖', age:30, } render() {

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

langwang1993的博客

11-08

3186

<div class="divone" onclick="divone(this)"> <div class="divchild" onclick="divchild(this)"></div> </div> function divone()

触发子元素的onclick不同时触发父元素的onclick

weixin_42596278的博客

01-11

3917

说的简单点，直接在子触发事件中，加入 event.cancelBubble=true; 就可以阻止父级触发事件。转载地址：https://www.cnblogs.com/zengweiming/p/5484924.html 由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个T...

如何阻止子元素触发父元素的事件

weixin_38125277的博客

06-28

6466

今天我做了一实验，想要实现当一个div嵌套另外一个div的时候，点击外层div的时候触发事件，而点击内层div的时候不进行事件触发，代码如下：原本我想着只给容器ct添加一个事件而不给其内的子元素添加事件，就能实现我的效果，结果后来意识到内层的div也属于容器ct的一部分，这样做无论点击容器部分还是内层div都会触发效果：然后我心想如果能把外层ct容器和内层的div分辨出来不就可以了吗，然后接产生了...

小程序中点击子元素事件而不触发父元素的点击事件

祈澈菇凉

01-13

1万+

在测试小程序的时候，发现了这样的一个bug，点击子元素事件d的时候触发父元素的点击事件，从而执行父级的点击事件，跳转到了父级的点击事件的页面了。其实很简单，只需要把子级的bindtap改成catchtap，就可以了。因为： bind事件绑定不会阻止冒泡事件向上冒泡 catch事件绑定可以阻止冒泡事件向上冒泡 ...

点击子元素却也触发父元素的点击事件

点击子元素时 不触发父元素的点击事件，阻止事件向父层冒泡

点击子元素时不触发父元素的点击事件，阻止事件向父层冒泡