1,stop修饰符:阻止事件冒泡

首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO

当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下

现在我们在click后面添加.stop修饰符,如下:

我们发现再次点击按钮后,事件不再冒泡,控制台只打出

2.prevent取消默认事件

.prevent等同于JavaScript的event.preventDefault(),用于取消默认事件。比如我们页面的<a href="#">标签,当用户点击时,通常在浏览器的网址列出#

3.capture 捕获事件

H5中事件的传播是从外到内的,冒泡是从内到外的,如图

capture可以在事件的传播中对事件进行补获,修改代码如下:

点击按钮发现结果为,outter,inner

4.self

修饰符.self只会触发自己范围内的事件,点击子组件不会触发该组件上的事件

当点击按钮和中部div时,不会触发外部div的click事件,只有直接点击外部div时才会触发

(二)咋使用VUE中的事件修饰符的更多相关文章

  1. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  2. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  3. 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

  5. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  6. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  7. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  8. Vue指令之事件修饰符

    事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...

  9. vue中的.native修饰符

    如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...

随机推荐

  1. JSP JSTL

    JSTL是Sun给JSP制定的一套标准标签库,JS代表JSP,TL即Tag Library. JSTL是一套很古老的标签库了,很多东西都不再适用,这里只介绍几个常用的标签. 使用JSTL需下载添加以下 ...

  2. Kubernetes概念之deployment

    一整天一整天的坐在办公室,真的很~~~,懵圈中....,求解救. 本文通过<Kubernetes权威指南>的概念部分学习总结 Deployment作用 Deployment与RC的作用其实 ...

  3. Git的下载安装

    下载地址:https://git-scm.com/download/win 命令: git add ...  ---将资源放到缓存区域 git commit  -m "提交说明"  ...

  4. 枚举ENUM的tostring() valueof()name()和values()用法

    从jdk5出现了枚举类后,定义一些字典值可以使用枚举类型; 枚举常用的方法是values():对枚举中的常量值进行遍历; valueof(String name) :根据名称获取枚举类中定义的常量值; ...

  5. Mysql数据库之备份还原(mysqldump,LVM快照,select备份,xtrabackup)

    备份类型: 热备份:读写不受影响 温备份:仅可执行读备份 冷备份:离线备份,读写均不能执行,关机备份 物理备份和逻辑备份 物理备份:复制数据文件,速度快. 逻辑备份:将数据导出之文本文件中,必要时候, ...

  6. [windows]c盘瘦身、系统盘清理临时文件、缓存等垃圾文件

    前言 虽然现在已经9102年了硬盘空间越来越大越便宜,但win系统用久了系统盘还是会渐渐变小的,公司的电脑系统盘就已经不够用了经常爆红,这个时候两个简单快速高效的办法 1.扩大系统盘空间,可以使用 w ...

  7. bootstrap ui样例

    http://demo.codedefault.com/demo/ui/theadmin/samples/invoicer/settings.html

  8. ubuntu1604系统初始化

    1.初始化网络配置 1.1.创建工作目录 生产环境下必须有个固定的目录存放一些安装软件和调试工具, 否则每个管理员都随意存放软件工具,服务器的环境可以想而知 mkdir -p /opt/{tools, ...

  9. 前端js判空处理,js字符串判空,js数组判空

    1.字符串 在 js 中,字符串为空会有这么几种形式,"",null,undefined,如果在已知变量为空串的情况下可以直接采用 if (string.length == 0) ...

  10. 总结敏捷开发之Scrum

    敏捷开发的概念 敏捷开发是一种以人为核心,迭代,循序渐进的开发方法. 为什么说是以人为核心?传统的瀑布模型是以文档驱动的,但是在敏捷中,只写少量的文档,注重的是人与人之间面对面的交流. 什么是迭代?迭 ...