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和组件阻止点击事件的更多相关文章

  1. 页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)

    如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...

  2. js常用阻止冒泡事件

    原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagat ...

  3. 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent

    stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...

  4. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

  5. 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  6. 点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  7. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  8. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  9. angular 点击事件阻止冒泡及默认行为

    经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...

  10. label 阻止冒泡 防止点击label 触发2次事件

    // 必须要把 jnput的外面的label加上事件阻止冒泡,否则点击label的时候,会冒泡到input上 再次触发input的点击事件 $('.xt_order_cleft_modb_rl_dx' ...

随机推荐

  1. 【Android 逆向】frida 检测绕过

    1. aaa.apk 安装到手机,是一个叫玩吧的应用 ./hooker ...... 23248 浏 览 器 com.browser2345_oem 32541 玩吧 com.wodi.who 244 ...

  2. ABP Suite模块项目中设置菜单及其多语言

    1.Blazor的菜单构造的类 ABP Suite自动生成的是这样: 2.从Study.Trade.Web的Menus下拷贝内容过来后 3.TradeMenus中增加一个常量 4.启动程序 单击Tra ...

  3. Excel Undo-Redo的编程问题

    Excel Undo历史栈对外是不透明的. 代码对Excel表单的编辑操作会清空Excel内部的Undo历史. Application.OnUndo只支持一次撤销,并且不支持ReDo. 使用DDE的方 ...

  4. 【Azure API 管理】APIM添加Log-to-eventhub的策略后,一些相关APIM与Event Hub的问题

    问题描述 1)    APIM 到Event Hub 写入日志是否有数量限制,比如每秒最大写入数量: 2)    是否可以在同一个APIM配置多个Event Hub,如果可以该APIM写入日志的峰值是 ...

  5. 摆脱鼠标操作 vscode-vim-use-readme.md

    vscode-vim 学习笔记 梳理下自己定义的快捷键 Normal模式返回 ESC capsLock 双击shift ctrl+[ jj ctrl+c (这个键比较特殊 用习惯y的话,考虑这个) 一 ...

  6. 基于泰凌微的TLSR8355芯片的2.4G无线私有协议PCBA设计调试总结

    一 前记 经常做物联网的类的产品,TLSR8355凭借着它的射频距离远,功能强大等优点成为很多客户的首选.TLSR8355系列专用于2.4GHz射频系统芯片解决方案,如零售/物流.专用网络.Beaco ...

  7. JavaFx 圆形头像实现

    原文:JavaFx 圆形头像实现 - Stars-One的杂货小窝 本文基于TornadoFx框架进行编写,封装工具代码是kotlin版本 圆形头像框组件封装成了stars-one/common-co ...

  8. SparseTable ST表

    Sparse Table ST表是一个静态二维数组st[i][j],作用是快速查询(O(1))区间最值(不只是最值,可重复贡献问题都可以用),st[i][j]代表的是在以引索i为起点,长度为\(2^j ...

  9. RTMP、X264与交叉编译

    RTMP.X264与交叉编译 ​ 与HTTP(超文本传输协议)同样是一个基于TCP的Real Time Messaging Protocol(实时消息传输协议).由Adobe Systems公司为Fl ...

  10. 8、Linux CentOS 安装.Net Core 3.1

    1.添加密钥 将 Microsoft 包签名密钥添加到受信任密钥列表,并添加 Microsoft 包存储库. 打开终端并运行以下命令: sudo rpm -Uvh https://packages.m ...