解决父子层div存在点击事件冲突的问题

最新推荐文章于 2023-09-26 13:27:27 发布
最新推荐文章于 2023-09-26 13:27:27 发布
阅读量559 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45735918/article/details/127517556
版权

var ev = window.event || arguments.callee.caller.arguments[0];
if (window.event) {
    ev.cancelBubble = true; // 只执行子层方法
}else {
    ev.stopPropagation(); // 阻止事件冒泡
}

在子层方法中加入以上代码，父层方法便不会执行

众星揽月
关注
专栏目录
vue中父元素点击事件与子元素点击事件冲突
学习永无止境
03-28 9226
在做vue项目的时候，遇到子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？这就用到vue事件中的事件修饰符 官网地址 https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6 Vue.js 为 v-on 提供了事件修饰符 .stop、.prevent、.capture、.self、.once、.passive，我们要处理子元素
解决一个页面多个 swiper 冲突
CedricD的博客
05-10 2890
当你在当前页面使用了多个swiper组件时，则会出现冲突，这个没什么可说的，直接上代码言简意赅 这是第一个Swiper //这是第一个Swiper <div id={style.banner} className="swiper-container swiper1"> <div className="swiper-wrapper"> { this.props.homeBannerList.map((v, i) => (
解决 父层div和子层div点击事件冲突 （冒泡触发的小方法）
qq_36423909的博客
08-10 6912
父模块和子模块点击事件（冲突解决方案）： HTML代码：         JS 代码： //父亲点击事件 $scope.parentClick = function () { } //孩子点击事件 $scope.childClick = function (event) {     event.stopPropagation();//终止事件冒泡
JavaScript-父子dom同时绑定两个点击事件，一个用捕获，一个用冒泡时执行顺序
qq_34412985的博客
04-01 820
事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件，且有的绑定在冒泡阶段、有的绑定在捕获阶段时，事件的触发顺序如何？如果你只关心这个问题，请直接下滑到3. 绑定多个事件，且由用户行为触发。如果你想细致了解JavaScript中的事件发生，请慢慢阅读。 1. 原生事件的发生顺序 一般来讲，当为一个a标签添加click事件以后，点击这个标签，会先执行绑定的事件、后跳转页面。一个in...
父div有touch事件影响button的点击事件
u011498933的专栏
07-26 2187
问题描述： 页面是手机移动端，给button添加了click事件，button的父页面添加了touch事件，导致button触发click事件的时候，总是默认触发父div的touch事件。 html里面有冒泡机制，触发子button的时候，父div的事件也会被触发，在手机端click事件默认延迟400ms这样会导致click事件失效。 解决方法： 这里用了比较笨的解决方法，event提供的...
父级和子级div的点击事件相互影响
qq_36904182的博客
04-19 979
解决方法：event.stopPropagation();
Div+CSS布局的十六条技巧及详细用法-DivCSS教程.pdf
08-04
在网页设计中，Div+CSS布局是一种常见的技术，它能够实现更加灵活和高效的页面布局。以下是Div+CSS布局的十六条技巧及其详细用法： 1. **理解IE的继承关系**：IE浏览器有时会混淆继承关系和父子关系，因此在编写CSS...
VUE之组件（父子与非父子通信）
weixin_45626166的博客
10-30 244
组件组织 通常一个应用会以一棵嵌套的组件树的形式来组织。 日常开发里，我们可以按照功能将一个网页拆分成很多个部分，每个部分就是一个组件。 例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的子组件。 父子组件通信 父子组件传值通信 假设第二层组件想和第一层组件进行通信，分析其传值过程 1、(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信 2、(第...
Vue笔记
许久
05-19 2742
vue控制台消除两个小提示 1.安装vue开发者工具 即可消除 2.提示我们正在使用一个开发者的vue版本 开发者版本比较大(有报错提示功能) 在生成环境中最好替换为生产版本 添加 Vue.config.productionTip = false 即可消除 事件绑定@click传参问题 默认会传event事件参数 @click="showInfo"和@click="showInfo(event)"相等的 可以直接传参@click=“showInfo(66)” 同时也可以带上事件参数@click=“
父元素与子元素的点击事件影响问题
热门推荐
人生不止眼前的电脑！
06-15 1万+
例如以下的代码： html：<div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;"> 父元素 <div class="elementII" style="height: 50px;width: 50px;border: 1px solid black;">子元素</div> </
解决div中嵌套元素时，二者点击事件同时触发
weixin_30883311的博客
12-06 849
以Angualr为例： <div class="previewImg" (click)="closeImg()"> <img id="leftArrow" *ngIf="mid > left" (click)="leftImg($event)" src="../../../assets/community/leftArrow@3x.png"/> ...
div 遮挡 点击事件失效 解决办法
明耀的博客
03-13 5981
在遮挡层加 style="pointer-events: none;"
阻止子元素继承父元素点击事件
zhouxukun123的专栏
09-30 4469
问题描述 用户登录输入对话框，有记录最近的登录用户名，当输入框获取焦点时，弹出历史用户名的下拉框。 但是，有个问题：如果是选择下拉列表的值，下拉框隐藏；不选择下拉列表的值或者输入其他用户名，则下拉列表不会隐藏。 解决思路 输入字符或者检测到输入框的值有变化后，下拉列表隐藏，或者鼠标点击输入框之外的任何地方就隐藏下拉列表。 解决方法 为了避免输入框也接收到输入框之外(父元素)的点击事件，所以输入框需...
Vue 之 父子组件通信与事件触发（最全实用总结）
XH_jing的博客
05-25 3033
之前写过一篇关于基于 微信小程序的父子组件传值通信与事件触发，今天整理一片关于 Vue 的父子组件的相关内容。 一、组件 子组件 <template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</button> <div>子组件接收父组件.
vue中父元素跟子元素同时有事件的情况下解决方法
最新发布
m0_61230272的博客
09-26 479
要解决这个问题，可以使用事件修饰符。一起使用，以阻止事件冒泡并阻止默认行为。方法会触发，并且由于事件冒泡，
div的子元素的点击事件会触发父元素的点击事件（禁用事件的浮升）
Abbey_qi的博客
08-22 3970
问题： 给一个很简单的例子，当点击第二个div的时候，会同时触发此div与其父元素的点击事件，按照官方的说法，这是事件的浮升，那么要怎么阻止这种情况呢？ <div onclick="alert();"> <div onclick="alert();"></div> </div> 解决方案： 使用 event.cancelBubble...
vue外层div上有点击事件，内层div也有点击事件，想要实现点内层div，不触发外层点击事件
我的博客
09-04 3555
vue外层div上有点击事件，内层div也有点击事件，想要实现点内层div，不触发外层点击事件 vue有个属性是@click.stop
jq 阻止事件冒泡（点击子级＜div＞不触发父级＜div＞）
BlizzardWu的博客
06-25 993
1:关于事件冒泡 事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。） 2:如何避免冒泡 1: 使用 event.cancelBubble=true; <div class="box1" id="box1" onclick="change_cong(2)" > <div class="box2" id="bo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值