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. win32 - 将线程重定向到另一个函数(附带Suspend的解释)

    Suspend: 挂起指定的线程 备注:不要永远挂起线程, 因为在Win32中,进程堆是线程安全的对象,并且由于在不访问堆的情况下很难在Win32中完成很多工作,因此在Win32中挂起线程极有可能使进 ...

  2. 关于json序列化时报错json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)

    1.今天在写客户端与服务端交互的程序的时候,发现了一个问题 客户端代码 #客户端程序主要是发送注册请求/登录请求给服务端,服务端接收响应后回应对应的应答给客户端,客户端接收响应后,然后做一些操作 # ...

  3. logback中使用MDC自定义日志输出格式

    logback-MDC 相当于自定义日志格式输出 写在过滤器中 示例: try { Context context = createContext(request, response); proces ...

  4. 【Azure 应用服务】可以在app service里建SFTP服务吗?

    问题描述 怎样可以在App Service里建SFTP服务? 并不是说通过FTP的方式进行App Service的文件部署. 问题回答 不能通过 App Service 来搭建总计的SFTP服务,因为 ...

  5. hbase报错ERROR: org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: Server is not running yet 采坑记

    1.错误异常信息: Exception in thread "main" java.lang.IllegalArgumentException: Failed to find me ...

  6. 从 HPC 到 AI:探索文件系统的发展及性能评估

    随着 AI 技术的迅速发展,模型规模和复杂度以及待处理数据量都在急剧上升,这些趋势使得高性能计算(HPC)变得越来越必要.HPC 通过集成强大的计算资源,比如 GPU 和 CPU 集群,提供了处理和分 ...

  7. CPNtools协议建模安全分析---实例(二)

    首先,token值是变迁的内部的,当变迁点火触发的时候token才会在网络中移动.在颜色Petri网中token是有区分的. 1.我么现在举一个学生吃饼的例子 ,颜色这样定义.    s表示一个学生类 ...

  8. Swagger (API框架,API 文档 与API 定义同步更新)

    1.依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring ...

  9. java学习 javaz-001 Helloworld 第一个demo

    java学习 javaz-001 Helloworld 第一个demo 目录 学习目标 前期准备 java sdk 1.8环境 编辑器IDE的选择 代码开发 目录结构 创建第一个java文件 创建第2 ...

  10. favorite 单词学习 主要是发音 fa - vor - it 注意 ri不连读 是自然带出来的r的尾音

    favorite 单词学习 主要注意发音 [ ˈfeɪ v(ə)r ɪt ] 主要是发音 fa - vor - it 注意 ri不连读 是自然带出来的r的尾音 favor : 来自拉丁语favere, ...