(1).stop // 阻止事件继续传播 即阻止冒泡过程
（2）.prevent //阻止默认事件发生 即event.preventdefault(): 实例： 阻止了a标签的默认刷新
（3）.capture // 添加事件监听器时使用事件捕获模式，即在捕获模式下触
（4）.self //当前元素自身时触发处理函数时才会触发函数，原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数
实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件
（5）.once //只触发一次

--最好绑定到指定元素

vue 踩坑-事件修饰符的更多相关文章

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

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

  2. vue指令与事件修饰符

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

  3. vue中的事件修饰符

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

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

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

  5. Vue指令之事件修饰符

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

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

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

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

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

  8. （二）咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

  9. 27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解

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

随机推荐

  1. Zabbix 创建监控项目

    #1 #2 [root@nod01 zabbix_agentd.d]# pwd/etc/zabbix/zabbix_agentd.d 新建文件nod.conf [root@nod01 zabbix_a ...

  2. go语言学习--map中键值得删除

    测试 map1 中是否存在 key1: 在例子 8.1 中,我们已经见过可以使用 val1 = map1[key1] 的方法获取 key1 对应的值 val1.如果 map 中不存在 key1,val ...

  3. [UE4]圆形小地图

    一.创建一个名为M_RoundRetainer的材质 二.创建一个名为RoundMiniMap的UserWidget 三.TestMiniMap中将添加进来 四.运行游戏

  4. Android 中Jackson的简单使用

    第一步:下载Jackson的jar包http://pan.baidu.com/s/1qXHwtQ0 第二步:在gradle中导入jar包 第三步:创建ObjectMapper对象的单例 Jackson ...

  5. sqlserver in 和 exist 子查询

    1 in 子查询 use StudentManageDB go --select StudentName from Students --where StudentId=(select Student ...

  6. bootstraptable学习(1)数据展示

    最近工作用到bootstraptable,并且一些功能需要很了解这个插件,那么我们便来看看这个东西 1.css与js的引入,顺序肯定是有讲究的,在这里不细说了 2.数据的引入与呈现,我们来看一下官网的 ...

  7. c#第一周的游戏

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  8. redis作为mysql的缓存服务器(读写分离)

    转自:https://www.iyunv.com/thread-52670-1-1.html 一.redis简介Redis是一个key-value存储系统.和Memcached类似,为了保证效率,数据 ...

  9. tomcat Error:NB:JAVA_HOME should point to a JDK not a JRE 解决方法

    环境:win7 tomcata7.0解压版本 执行:service.bat install 报错:JAVA_HOME should point to a JDK not a JRE 网上找了几种解决方 ...

  10. Python的多态、继承与封装

    一.多态 不用知道变量所引用的对象类型,还是能对它进行操作,它会根据对象(或类)的类型不同而表现出不同的行为. def run_twice(animal): animal.run() animal.r ...