(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. jQuery的杂项

    <script  src="引入插件"></script> 位置应写在head中,在http协议中,当你浏览网页时,会先加载head里面的东西  刷新页面时 ...

  2. es6数组的方法

    1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null  (是实参构成的数组 ...

  3. Oracle 小技巧

    Oracle小技巧 ###add at 18-10-11 1  ed 在sqlplus当中 如果前一条语句输入有误的话 可以输入ed再回车.在进行编辑 输入ed后有弹窗,可以对之前的输入语句进行编辑 ...

  4. MySql 索引优化实例

    查询语句 SELECT customer_id,title,content FROM `product_comment` WHERE audit_status=1 AND product_id=199 ...

  5. 关于Vue实例的生命周期created和mounted的区别

    什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...

  6. Hive快捷查询:不启用Mapreduce job启用Fetch task

    启用MapReduce Job是会消耗系统开销的.对于这个问题,从Hive0.10.0版本开始,对于简单的不需要聚合的类似SELECT <col> from <table> L ...

  7. 503 Error: need EHLO and AUTH first

    设置OUTLOOK2013使用QQ邮箱,按照QQ邮箱的配置介绍设置好后,收邮件的服务可以了,但是发送邮件的服务失败,报错:503 Error: need EHLO and AUTH first,经查, ...

  8. 踩过的坑：InteliIJ IDEA 打开的项目突然左侧目录结构消失了，如何处理？

    试了很多的办法,删除项目,然后重新从git下载,再导入项目,但是对于暂存未上传到git的文件也会被一并删除,这样就亏大发了 之前一直没有找到解决办法,这里记一下终身有效的办法,并且比较好操作 按下列步 ...

  9. 第一类对象-> 函数名 -> 变量名

    函数对象对象可以像变量一样进行赋值 还可以作为列表的元素进行使用 可以作为返回值返回 可以作为参数进行传递 # def fn(): # print("我叫fn") # fn() # ...

  10. python-requests数据驱动延伸

    在 python-requests模块的讲解和应用 基础上进行数据驱动的延伸 task_01_requests.py #-*- coding:utf-8 -*- #task_01_requests.p ...