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. 学习go语言编程之流程控制

    Golang支持如下4种流程控制语句: 条件语句:if,else和else if 选择语句:switch,case和select 循环语句:for,range 跳转语句:goto 条件语句 示例代码: ...

  2. 【LeetCode回溯算法#03】电话号码的字母组合(数字映射字母)

    电话号码的字母组合 力扣题目链接(opens new window) 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任 ...

  3. 【Azure Function】在Function执行中遇见Timeout错误

    问题描述 在Function执行中遇见Timeout错误: Microsoft.Azure.WebJobs.Host.FunctionTimeoutException /Timeout value o ...

  4. 【Azure Redis 缓存】定位Java Spring Boot 使用 Jedis 或 Lettuce 无法连接到 Redis的网络连通性步骤

    问题描述 Java Spring Boot的代码在IDE里面跑可以连上 Azure 的 Redis服务,打包成Image放在容器里面跑,就连不上azure的redis服务,错误消息为: Unable ...

  5. 万字长文学会对接 AI 模型:Semantic Kernel 和 Kernel Memory,工良出品,超简单的教程

    万字长文学会对接 AI 模型:Semantic Kernel 和 Kernel Memory,工良出品,超简单的教程 目录 万字长文学会对接 AI 模型:Semantic Kernel 和 Kerne ...

  6. redis 安装的参考文章

    redis 安装  :  https://www.runoob.com/redis/redis-install.html

  7. Java 常用类 String类与其他结构之间的转换-----String 与 基本数据类型,包装类之间的转换

    1 /* 2 涉及到String类与其他结构之间的转换 3 4 */ 5 6 //String 与 基本数据类型,包装类之间的转换 7 //String --->基本数据类型,包装类:调用包装类 ...

  8. Mutillidae品台上使用sqlmap注入测试

    Mutillidae是一个开放源码的提供安全渗透测试的Web应用程序, Mutillidae可以安装在Linux.windows xp.windows 7等平台上.下载及安装说明文档详见:mutill ...

  9. centos 磁盘满

    1.使用命令:df -lk 找到已满磁盘 2.使用命令:du --max-depth=1 -h 查找大文件,删除

  10. 没有 Release 文件的解决方法

    https://blog.csdn.net/weixin_44903509/article/details/108825738 sudo apt-get update 出现问题 E: 仓库 " ...