(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. Oracle 非归档--归档操作流程

    转载自链接  https://blog.csdn.net/u013611461/article/details/53558077 SQL> shutdown immediate; Databas ...

  2. HDOJ 2006 求奇数的乘积

    #include<iostream> #include<vector> using namespace std; int main() { int n; while (cin ...

  3. MySQL学习----explain查看一条sql 的性能

    在开发的过程中,对于我们写的sql语句,我们有时候会考虑sql语句的性能,那么explain就是首选.Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决 ...

  4. springMVC的执行流程和完整代码

    一.什么是 Spring MVC Spring MVC 属于 SpringFrameWork 的后续产品,已经融合在 Spring Web Flow 里面,是一个强大灵活的 Web 框架.Spring ...

  5. java jdk版本切换

    首先看链接: 1. 这个链接清晰,但不一定能成功,但也不一定:https://blog.csdn.net/spt_dream/article/details/70673836 2. 其次这个链接比较完 ...

  6. 在html中用js代替${pagecontext.request.getcontextpath}这样就不用使用jsp了

    var pathArray = window.location.pathname.split('/');  var secondLevelLocation = pathArray[1];  var l ...

  7. docker设置容器固定ip

    docker安装后,默认会创建三种网络类型,bridge.host和none,可通过如下命令查看 sudo docker network ls 1 bridge:网络桥接 默认情况下启动.创建容器都是 ...

  8. JVM调优常用参数

    JVM常用参数配置 -Xmx2048m 最大堆大小 -Xms1024m 初始堆大小 -Xmn1024m 年轻代大小 -XX:SurvivorRatio=8 Eden区与Survivor区的大小比值,设 ...

  9. JSP基础解析

    EL表达式     https://www.cnblogs.com/zhouguanglin/p/8117406.html EL(Expression Language) 是为了使JSP写起来更加简单 ...

  10. Tomcat 环境部署网站. 帆软平台部署.

    主要内容. 需要使用Tomcat 部署 帆软报表平台(以下简称报表平台). 报表平台可以集成到网站, 也可独立部署. 此处是独立部署.即通过 网址:域名 独立访问这个报表平台. -- 技术要点 Tom ...