标签：Vue 06 捕获 修饰符 事件 ------ 滚动 我们 冒泡

事件修饰符

写一个简单的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修饰符再去重新运行一下：

 

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

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

 

标签：Vue,06,捕获,修饰符,事件,------,滚动,我们,冒泡
来源： https://blog.csdn.net/weixin_52618349/article/details/122293639

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。