(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. Vue.js系列之项目结构说明

    转:https://www.jb51.net/article/111658.htm 前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli ...

  2. Jmeter（四十二）Jmeter工作原理

    “千举万变,其道一也.不离于宗,谓之天人” ----<荀子·儒效>和<庄子·天下> 作为接口测试工具 Jmeter只是作为发起请求的客户端(可以理解为前端),Jmeter是作为 ...

  3. [UE4]Is Server判断是否在服务器端

  4. Win7删除缓存垃圾文件

    del /s /f /q C:\*.tmp

  5. Centos 7 下, 安装odoo 10

    1. Centos在虚拟机中, 最小化安装, 网络连接选择的是 桥接模式, 安装完成后, 是不能直接上网的, 输入root 和密码, 登录进去, 然后执行: [root@localhost ~]# v ...

  6. 在线学习和在线凸优化（online learning and online convex optimization）—在线分类问题2

    紧接上文,我们讲述在线分类问题 令,为0-1损失,我们做出如下的简化假设: 学习者的目标是相对于hypotheses set: H具有low regret,其中H中的每个函数是从到{0,1}的映射,并 ...

  7. route

    route   添加/删除一条到192.168.3.0/24的路由,网关为192.168.1.254? route add/del  -net 192.168.3.0 netmask 255.255. ...

  8. Linux Kafka源码环境搭建

    本文主要讲述的是如何搭建Kafka的源码环境,主要针对的Linux操作系统下IntelliJ IDEA编译器,其余操作系统或者IDE可以类推. 1.安装和配置JDK确认JDK版本至少为1.7,最好是1 ...

  9. 利用NPOI导出数据到Execl

    相信很多童鞋都开发过Execl的导入导出功能,最近产品中无论是后台数据分析的需要,还是前端满足用户管理的方便,都有Execl导入导出的维护需求产生. 以前做这个功能,如果是web,利用HttpCont ...

  10. react学习笔记（一）

    React的介绍: React来自于Facebook公司的开源项目 React 可以开发单页面应用 spa(单页面应用) react 组件化模块化 开发模式 React通过对DOM的模拟(虚拟dom) ...