事件修饰符

写一个简单的vue实例：

 

 

点击弹窗按钮：

 

 我们点击弹窗后就进入到这个页面了。但是我们现在不想点击弹窗进入这个页面，我们就要做一些修改。

我们要去阻止这种默认功能的发生。

再去运行：

 

 

这样我们去点击按钮就不会发生跳转。

我们也可以不用去亲自去写这个阻止事件。在click后去加也可以：

 

 这个prevent就是事件修饰符，是我们click事件的修饰符。

vue一共给了我们6个事件修饰符，前三个常用后三个不常用。

vue中的事件修饰符：

1.prevent：阻止默认事件（常用）

2.stop:阻止事件冒泡（常用）

3.once:事件只触发一次（常用）

4.capture：使用事件的捕获模式

5.self:只有event.target是当前操作的元素才是触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

 

运行：

 

 

因为我们的按钮绑定方法，div又绑定了这个方法。就无限嵌套，所以这时我们可以用第二个修饰符去破解这个嵌套。

 

我们只需要加stop修饰符就可以了。

接下来我们来学习第三个修饰符：

时间只会出现一次：

 

我们用once修饰符即可。

 接下来我们看看第四个修饰符，捕获模式：

 

 

 运行：

我们先从外向里去捕获事件，然后再由里到外去冒泡，最终是我们冒泡的事件是响应的。

我们不想要这样，我们想直接以捕获的事件去响应。

 

我们在外层的盒子上加上.capture。就是外面的盒子在捕获阶段就开始执行：

运行一下：

 

虽然我们先点击的2，但是我们从外向里捕获，先捕获box1，就先输出1，再捕获box2就输出2.

这个用的不多。

接下来我们开始去了解一下我们的第五个修饰符self:

 

这段代码和之前冒泡那个是一样的。

 

我们现在打印e.target

 

因为我们是一个按钮，所以我们会出现两个提示内容，我们点击的是button，所以当前的target一点是按钮。

我们去加上self:

 

再去运行一下：
 

这次只出现一个提示内容，因为冒泡出去后的本身是div不是button所以不触发事件。某种意义上来说这种方式也可以用来阻止冒泡。

我们现在说说最后一个修饰符：

这个passive用到的更少了：

 

 

 

我们每次拖动滚动条就会打印出@符，我们去运行一下看看：

 

我们有时候需要用到滚动事件时也不使用这个：也会使用wheel

刚才是我们的滚动条发生移动触发事件，这个是我们的鼠标滚动轮发生移动触发事件：

运行：

 

这两种方式的区别就是，滚动条到最后的位置就不再触发了而我们的滚动轮即使到最下方，只要我们的滚动轮还在动依然会触发事件。

 

我们去更改我们方法中的内容再去运行一下：

 

我们滚动滚动轮 ，疯狂开始计数，但是我们发现我们的滚动条一点也没有变化，这是因为我们是滚动我们的滚动轮，先去触发我们的事件，等事件都处理完了，才去让滚动条滚动一下。

我们加上我们的passive修饰符再去重新运行一下：

 

用了这个修饰符，我们先去做我们能做的再去回调函数。

这个如果是移动端我们可能会去使用一下。前三个我们要掌握，后三个了解即可。