1.6　事件修饰符

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

1.6.1　鼠标按键修饰

以鼠标修饰符举例，通常单击时可触发事件，我们可以将其设置成右击或者单击鼠标滚轮时触发事件，代码如下。

视图层代码如下。

在“@click”后面加“.right”，此时必须右击才能触发show方法，也可以将其设置为单击鼠标滚轮时触发，代码如下。

“.middle”表示必须单击鼠标滚轮才能触发show方法。

1.6.2　系统修饰符

常用的系统修饰符有.ctrl、.alt、.shift，其表示按住修饰键才能触发事件，代码如下。

上述代码必须在单击的同时按住Ctrl键，才能触发show方法，同理，.alt修饰和.shift修饰的实现方法也是一样的。

1.6.3　事件修饰符

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

.stop阻止事件冒泡的代码如下。

视图层代码如下。

上述代码中，两个div盒子属于嵌套关系，并且都有事件，当单击main盒子时，首先会触发show方法，然后触发sayhi方法，这叫作事件冒泡，.stop可以阻止事件冒泡，代码如下。

此时单击main盒子，只会触发show方法。

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

此时单击main盒子，首先触发的是sayhi方法，再触发show方法。

.self单击元素本身触发事件，代码如下。

此时单击main盒子只能触发show方法，要触发sayhi方法则必须单击content盒子。

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

.prevent阻止默认事件，代码如下。

此时单击“百度”，并不会跳转到百度页面，.prevent阻止了a标签的跳转功能，打开控制台，控制台会调用show方法。

.once修饰符只生效一次，代码如下。

第一次单击“百度”，.prevent会阻止a标签的默认跳转，所以不会进行页面跳转。但是第二次单击“百度”页面，则会正常跳转，加上.once之后，.prevent修饰符只生效一次。