(二)咋使用VUE中的事件修饰符
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中的事件修饰符的更多相关文章
- vue中的事件修饰符
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
- 怎样在 Vue 中使用 事件修饰符 ?
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...
- 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中的.passive修饰符
一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- vue指令与事件修饰符
一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...
- vue学习(六) 事件修饰符 stop prevent capture self once
//html <div id="app"> <div @click="divHandler" style="height:150px ...
- Vue指令之事件修饰符
事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...
- vue中的.native修饰符
如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...
随机推荐
- SwitchGame---MybatisPLus
//实体类package com.example.spring.entity; import cn.afterturn.easypoi.excel.annotation.Excel;import cn ...
- 目标检测论文解读11——Mask R-CNN
目的 让Faster R-CNN能做实例分割的任务. 方法 模型的结构图如下. 与Faster R-CNN相比,主要有两点变化. (1) 用RoI Align替代RoI Pool. 首先回顾一下RoI ...
- 编译出现 WARNING: 'aclocal-1.15' is missing on your system.问题解决
1. ubuntu14.04 出现这个问题,需要手动安装 Automake-1.15 2. 下载地址: http://ftp.gnu.org/gnu/automake/ http://ftp.gnu. ...
- V2X:
一篇文章读懂V2X系列:标准篇 为了提升交通系统的安全性和智能化,智能交通系统的概念正逐渐兴起.智能交通可以利用新一代的通信网络和数据处理能力,提高现有交通系统的整体效率,降低能量损耗,增加运输的安全 ...
- Linux中的关机操作
shutdown -h now //马上停止服务进行关机 shutdown -h 12:00 .//在12点后进行关机 shutdown -h +10 //在10分钟后进行关机 shutdown ...
- LeetCode 896. Monotonic Array
原题链接在这里:https://leetcode.com/problems/monotonic-array/ 题目: An array is monotonic if it is either mon ...
- Python面向对象 | 类空间及类之间的关系
一. 类的空间问题 1何处可以添加对象属性 class A: def __init__(self,name): self.name = name def func(self,sex): self.se ...
- 洛谷 P1965 转圈游戏
洛谷 P1965 转圈游戏 传送门 思路 每一轮第 0 号位置上的小伙伴顺时针走到第 m 号位置,第 1 号位置小伙伴走到第 m+1 号位置,--,依此类推,第n − m号位置上的小伙伴走到第 0 号 ...
- NOIp初赛题目整理
NOIp初赛题目整理 这个 blog 用来整理扶苏准备第一轮 csp 时所做的与 csp 没 有 关 系 的历年 noip-J/S 初赛题目,记录了一些我从不知道的细碎知识点,还有一些憨憨题目,不定期 ...
- javascript中的作用域和变量提升
js的运行主要分两个阶段:js的预解析和运行,预解析阶段所有的变量声明和函数定义都会提前,但是变量的赋值不会提前.