vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件
vue阻止冒泡事件 阻止点击事件的执行
<div @click="alerA1()" > <div @click.stop="alerA2()><div> </div>
这样就可以实现阻止点击 点击 alerA2() 不会执行 alerA1()
如果 你中间的是一个组件类似这样的
<div @click="alerA1()" > <div @click.stop=""> <el-dropdown trigger="click" ></el-dropdown> //这里是下拉菜单组件trigger="click" <div> </div>
只需要在组件的外面 嵌套个div 然后设置@click.stop="" 即可解决
vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件的更多相关文章
- 页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)
如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...
- js常用阻止冒泡事件
原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagat ...
- 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent
stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...
- 重新认识vue之事件阻止冒泡
冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
- 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- 点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态
给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...
- vue 事件上加阻止冒泡 阻止默认事件
重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- angular 点击事件阻止冒泡及默认行为
经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...
- label 阻止冒泡 防止点击label 触发2次事件
// 必须要把 jnput的外面的label加上事件阻止冒泡,否则点击label的时候,会冒泡到input上 再次触发input的点击事件 $('.xt_order_cleft_modb_rl_dx' ...
随机推荐
- FART 脱壳机原理分析
FART是一个基于Android 源码修改的脱壳机 可以脱整体壳和抽取壳 FART脱壳的步骤主要分为三步: 1.内存中DexFile结构体完整dex的dump 2.主动调用类中的每一个方法,并实现对应 ...
- [BUUCTF][Web][极客大挑战 2019]Secret File 1
打开靶机对应的url 右键查看网页源代码,查看到一个访问路径 /Archive_room.php 构造url访问一下 http://3bfaebad-fdfa-4226-ae0a-551f0228be ...
- geacon_pro配合catcs4.5上线Mac、Linux
最新最全文章见我个人博客: xzajyjs.cn 一些链接 Try师傅的catcs4.5项目: https://github.com/TryGOTry/CobaltStrike_Cat_4.5,最新版 ...
- 最强本地缓存Caffeine
Caffeine 是基于 JAVA 8 的高性能缓存库.并且在 spring5 (springboot 2.x) 后spring 官方放弃了 Guava,而使用了性能更优秀的 Caffeine 作为默 ...
- Zabbix技术分享——zabbix命令详解
在与IT运维的小伙伴交流过程中不少人问到了zabbix_agentd.zabbix_proxy等命令的具体使用问题,为此这一期内容我们来聊聊Zabbix相关命令,其中包括zabbix_server.z ...
- Springboot中-全局异常处理类用法示例
使用springboot搭建web项目的时候,一般都会添加一个全局异常类,用来统一处理各种自定义异常信息, 和其他非自定义的异常信息,以便于统一返回错误信息.下面就是简单的示例代码, 自定义异常信息. ...
- AutoNumber VsCode插件开发
AutoNumber VsCode插件开发 ::: details 目录 目录 AutoNumber VsCode插件开发 Step. 2: 安装脚手架 Step. 3: 创建空项目 Step. 4: ...
- C++实现一个简单的生产者-消费者队列
本文的代码都是ChatGPT生成,我只是做了微小的调整和整合,AI提示词如下: 设计一个C++类,支持生产者-消费者模型,可以通过size函数获取剩余数量 可能第一次生成的不一定合适,多刷新几次. 生 ...
- 简单实用算法——位图算法(BitMap)
目录 算法原理 优点和缺点 算法实现(C#) 算法应用 参考文章 算法原理 BitMap的基本思想就是用一个bit位来标记某个元素对应的Value,而Key即是该元素.由于采用了Bit为单位来存储数据 ...
- 基于python的多线程串口处理实例源码解析
一 概念 1.简介 该源码可以让串口收发数据并行处理. 2.特性 使用了线程 使用了serial 使用了class 二 源码解析 1.串口读取固定数据函数: def uart_recv_header( ...