Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第1章 Vue.js基础入门 1.6 事件修饰符

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第1章 Vue.js基础入门

1.6 事件修饰符

事件修饰符主要用来处理DOM事件细节，例如：阻止事件冒泡、取消事件默认行为、修饰鼠标、修饰键盘等。

1.6.1 鼠标按键修饰

通常鼠标点击事件都是左键单击时触发，可以将其设置成右击或者单击鼠标滚轮时触发事件。

示例

1.6.2 系统修饰符

常用的修饰符有.Ctrl、.alt、.shift，表示要按住修饰键才能触发事件。

.alt、.shift同理

1.6.3 事件修饰符

常用的事件修饰符有：.stop、.capture、.self、.prevent、.once

.stop阻止事件冒泡。

什么是事件冒泡？

这两个div盒子属于嵌套关系，并且都有事件，当单击main盒子时，首先触发sayhello方法，然后触发sayhi方法，这就叫事件冒泡。

.stop可以阻止事件冒泡

这样就只会触发sayhello方法。

.capture使用捕获模式，指先触发外侧div事件，再触发内部div事件。

此时单击main盒子，先sayhi，再sayhello

.self单击元素本身触发事件

此时单击main盒子就只会触发sayhello方法，要触发sayhi方法必须单击外侧盒子。

.stop和.self的区别，.self只能阻止元素自身冒泡，如果还有其他嵌套事件，会继续冒泡，.stop是阻止整个事件冒泡。

.prevent阻止默认事件。

示例：阻止超链接自动跳转

.once修饰符只生效一次。

加上.once之后，.prevent修饰符只生效一次。