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. 微信小程序开发--常用开发实例

    一.常用商品列表的换行排布 <view class="box_max"> <view class="box_min">限时秒杀</ ...

  2. Django rest framework ---- 权限

    Django rest framework ---- 权限 添加权限 api/utils文件夹下新建premission.py文件,代码如下: message是当没有权限时,提示的信息 # FileN ...

  3. 使用jave1.0.2将amr文件转成其他格式报错解决方案

    背景:最近需要将微信公众号里面用户发的语音文件转成其他格式的语音文件 介绍:在刚开始使用jave1.0.2 没有几行代码就可以实现,但是发现在转换的过程会报错,但是最后文件也转成功了,此时是在wind ...

  4. 四步理解GloVe!(附代码实现)

    1. 说说GloVe 正如GloVe论文的标题而言,GloVe的全称叫Global Vectors for Word Representation,它是一个基于全局词频统计(count-based & ...

  5. 混合高斯模型(Gaussian mixture model, GMM)

    1. 前言 这就是为什么我要学习一下二维高斯分布的原因: 总感觉数学知识不够用呐,顺带把混合高斯模型也回顾一下. 2. 单高斯模型(Gaussian single model, GSM) 2.1 一维 ...

  6. AcWing 38. 二叉树的镜像

    习题地址 https://www.acwing.com/solution/acwing/content/2922/ 题目描述输入一个二叉树,将它变换为它的镜像. 样例 输入树: / \ / \ / \ ...

  7. swiper使用总结-坑点汇总

    1.开发中遇到个坑,ScrollableTabView(选项卡)+swiper(轮播图)在安卓下,初始化的第一页不会渲染,需要在ScrollableTabView挂载完毕后再渲染swiper. 解决方 ...

  8. 达信:深度解读COSO新版企业风险管理框架(ERM)

    http://www.sohu.com/a/124375769_489979 2016年6月,美国反欺诈财务报告委员会(The Committee of Sponsoring Organization ...

  9. 1.Java介绍

    第一章 走进Java 一.Java技术体系 Java技术体系组成部分:Java程序设计语言.Java虚拟机.Class文件格式.Java API类库 JDK:Java程序设计语言 + Java虚拟机 ...

  10. java GC jvm 内存分布 和新生代,老年代,永久代,(详细)

    如果大家想深入的了解JVM,可以读读周志明<深入理解Java虚拟机:JVM高级特性与最佳实践> 需要掌握的东西,包括以下内容.判断对象存活还是死亡的算法(引用计数算法.可达性分析算法).常 ...