同一层级不同按钮的点击事件互相触发了

最新推荐文章于 2023-06-30 16:48:18 发布

银子的笔记

最新推荐文章于 2023-06-30 16:48:18 发布

阅读量313

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/c_jiji_yy/article/details/118898709

版权

本文探讨了在Vue中使用v-if时，点击事件可能错误触发的情况，原因是v-if的条件渲染机制。当`aa`为真时，点击`aa`会触发事件，但若条件变化，可能导致点击事件未预期地触发`bb`。解决这个问题的方法包括为每个div添加唯一key或者将`@click`事件移至外层div。理解这一机制对于优化Vue应用的性能和避免逻辑错误至关重要。

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

点击aa的事件可能触发bb事件，原因是v-if的渲染机制
    <div v-if="aa" @click="aa"></div>
    <div v-else-if="bb" @click="bb"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

银子的笔记

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS技巧专栏：一日一例 18 -纯CSS实现背景浮光掠影的按钮特效

uu0216的博客

08-02

1208

按钮是好几种颜色的背景色组成的，使用css的话，应该会有几个不同颜色的层，在按钮后面移动。每个层互相叠加，大概还会用到图片混合模式产生了更多的叠加的颜色，然后边缘过渡的话，就是用模糊滤镜了。

点击一个盖在另一个元素上的元素（两元素同级），触发被盖住的元素的点击事件。

zhangxiaodui的博客

04-15

2952

最近在做小程序，需要给一个元素加个光影效果，然后再做的过程中，如果一道光刚好滑到要点击的元素上，就相当于没点到元素上了，从网上搜了一下，说给盖住其他元素的那个元素加个CSS属性就可以了，什么属性呢？ pointer-events: none; 加了这个属性后，它就不会挡住我要点的元素了，就穿透了。 ...

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

js 点击事件 深入

蚁族的奋斗的博客

06-10

146

首先点击由按下和抬起组成，一般情况下按下和抬起的都是同一个元素，如果按下和抬起不是同一个元素的话，那么点击对象就是父元素，如果父元素此时也有点击事件的话就会相应。（事件冒泡是不管用的，因为事件就没有产生）如图所示：（a，b ，c 都有点击事件，c是ab 的父级，b阻止了冒泡）如果点击b ，事件对象就是b，相应b 的事件，此时c不响应（因为b阻止了冒泡）如果点击a ，此...

v-if、v-show、v-for v-bind

苏先生前端

09-26

218

v-if 条件为真所在标签元素显示为假不显示原理：不加载该元素 v-show 条件为真所在标签元素显示为假不显示原理：设置display:none; 你会看到同样的内容，但两者问确实存在其他的影响和差异。首先，因为使用 v-if 隐藏的内部元素不会被显示， vue 不会尝试生成对应的 HTML 代码：而对于 v-show 指令，事实并非如。这意味着隐...

Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）

最新发布

孙悟空

06-30

1万+

最近遇到这么一个问题：有一个父div，包含一个子div。要求点击父div值执行fun()函数，而点击子div时不执行fun()函数。

vue同级组件传参触发事件的四种方法

weixin_34336526的博客

08-04

1386

1、ref 2、新建vue实例 3、vuex 4、$emit 转载于:https://www.cnblogs.com/sunsie/p/7286140.html

【JavaFX Properties事件处理】：绑定事件与逻辑触发的高级技巧

JavaFX中的事件处理机制允许开发者响应用户的交互行为，如点击、按键或者系统事件。事件处理是构建动态用户界面不可或缺的一部分。通过事件，我们可以做到界面与用户交互的实时响应。 ## 1.2 JavaFX Pr

【Rose工具高级使用技巧】：让你的设计更上一层楼

从基础的界面布局到UML图解和项目管理，再到高级的类图设计、行为建模以及架构组件图的优化，文章为读者提供了一个系统学习和掌握Rose工具的完整路径。此外，还探讨了Rose工具在代码生成、逆向工程以及协同工作和...

tekvisa高级事件处理：事件驱动编程的深入剖析

本文对事件驱动编程的概念与原理进行了深入探讨，并重点分析了TekVISA在事件驱动编程中的应用和高级事件处理技术。文章首先介绍了TekVISA的基础知识和事件模型，然后探讨了如何高效配置和使用TekVISA事件。随后，...

因为层级关系触发不到的点击事件

weixin_46451295的博客

09-09

390

pointer-events: none; 因为动画的层级关系导致下边元素的点击事件触发不到给动画的css加上这个即可

div嵌套div ，点击子级div不触发父级div点击事件

热门推荐

jimmy609的专栏

12-06

2万+

情况如下：外层的div有一个点击跳转事件，按钮div也是一个点击事件用来隐藏整个div，产生的问题是，点击了关闭按钮了同事会触发父级div的跳转事件，解决方法：在子级div上增加一个事件 onClick="event.cancelBubble = true"，这样就可以只触发自身的点击事件了

拦截点击事件

wleleven的博客

11-21

1519

1.如何寻找最合适的View? 主窗口会在视图层次结构中找到一个最合适的视图来处理触摸事件. 那如何找到最合适的View呢? 1.先判断自己是否能够接收触摸事件,如果能再继续往下判断, 2.再判断触摸的当前点在不在自己的身上. 3.如果在自己身上,它会从后往前遍历子控件,遍历出每一个子控件后,重复前面的两个步骤. 4.如果没有符合条件的子控件,那么它自己就是最适

解决布局点击事件穿透的问题

hijunmeng的专栏

04-23

9586

在编写xml时使用到RelativeLayout或FrameLayout时，如果布局有层次结构，会发现点击上层时会触发下层的事件，这有时候并不是我们想要的结果，我们只想点击上层的就只触发上层布局的事件而不影响下层的，这时可以在上层的布局中增加android:clickable="true"的属性，这样下层的事件就不会被触发了。

z-index上层元素遮挡下层元素点击事件解决

qq_31847185的博客

09-19

1万+

一、问题描述笔者是在些一个登录界面时遇到这个问题的，需求是点击登录按钮出现登录悬浮框，初始化时登录悬浮框是display:none的，但笔者发现登录框那一块区域的input框无法响应点击时间，也无法获得焦点。一般鼠标放在input框上是会变成编辑的横杠，input框也会获得焦点。二、解决方案对上层元素使用： pointer-events: none; 这样点击事件就能穿透上层...

阻止上层div触发点击事件，并触发下层div的点击事件

nayi_224的博客

12-19

6172

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div onclick="aa(1);" style="width: 200px;height: 20...

如何让被遮挡层可以进行事件点击？（纯CSS方法）

【前端 · 小讴】的博客

12-11

7350

非常简单：外层（被遮挡的层）{ pointer-events: none; } 内层（要发生事件的层）{ pointer-events: auto; } pointer-events属性本身有很多取值，但只有none和auto可以用在浏览器上，其他都只能应用在SVG上取值none：元素永远不会成为鼠标事件的target 取值auto：与pointer-events...

HTML中点击图片不同区域触发不同事件图片定位

我本可以

06-05

1万+

在一张图片上，点击不同部分区域触发不同事件。其实就是根据一张已知像素大小的图片，以其左上角作为远点坐标，建立一个右下方向为正轴的二维坐标系。然后建立矩形，圆形等区域并绑定href属性或者其他js事件即可。

深入Qt框架实现高级编程技巧

信号是由某个操作触发的一种通知，槽函数是响应信号的方法。 3. **元对象系统：** Qt的元对象系统提供了一种运行时反射和动态类型信息的能力。它是信号与槽机制的基石，也是QMetaObject类提供的核心特性。 4. **...