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. Ubuntu常用工具和问题整理

    安装Ubuntu虚拟机时常会遇到的几个问题 1.安装时设置镜像 安装Ubuntu系统时设置国内镜像可以加快安装速度:http://mirrors.aliyun.com/ubuntu/ 参考:ubunt ...

  2. Hi3516开发笔记(九):在QtCreator开发环境中引入海思sdk的bsp包,运行显示Qt界面

    前言   之前启动Qt界面程序失败了,是因为需要引入HiSDK的BSP中的HiMPP,并对HiMPP进行初始化设置.   在sdk中查询海思SDK头文件和库       在Qt中调用海思BSP   在 ...

  3. django中信号

    # 信号的理解 在某个行为进行的某个阶段给这个行为添加一个附带的行为 # 相关api ## 数据表 pre_init # django的model执行其构造方法前,自动触发 post_init # d ...

  4. 【NLP学习其3.5】词嵌入的特性,为什么词之间会有联系?

    词嵌入的特性 现在你有了一堆嵌入向量,我们可以开始学习他们之间的特性了 前情提要:https://www.cnblogs.com/DAYceng/p/14962528.html 先把各向量重新命名便于 ...

  5. 【Azure 应用服务】Azure Function 不能被触发

    问题描述 Azure Function 不能被Postman 触发,错误信息如下: Error: write EPROTO 4020778632:error:100000f7:SSL routines ...

  6. 【Azure 应用服务】本地Git部署Java项目到App Server,访问无效的原因

    问题描述 在App Server的部署中心配置好本地Git 仓库 并推送 git push azure master 分支代码到服务器时,并未发生错误 ,但是服务异常,无法访问到正确的项目文件,始终打 ...

  7. 主流开源分布式图计算框架 Benchmark

    本文由美团 NLP 团队高辰.赵登昌撰写,首发于 Nebula Graph Community 公众号 前言 随着近年来数据的爆炸式增长,如何高效地分析处理数据,在业界一直备受关注.现实世界中的数据往 ...

  8. Ubuntu中安装使用QEMU/KVM/virt-manager运行虚拟机

    本文为原创,原文发布于个人博客网站:Ubuntu中安装使用QEMU/KVM/virt-manager运行虚拟机 有时候我们需要在同一台计算机中使用多种不同操作系统环境,基于已有的同一堆硬件资源来获得不 ...

  9. Program type already present: com.xxx

    该错误是由于工程中存在着相同的类导致(包名与类名都相同),有可能是不同的依赖中有着相同的类,全局搜索该类便可得知

  10. C++ mySQL数据库连接池(windows平台)

    C++ MySQL数据库连接池 新手学了C++多线程,看了些资料练手写了C++数据库连接池小项目,自己的源码地址 关键技术点 MySQL数据库编程.单例模式.queue队列容器.C++11多线程编程. ...