美文网首页
vue 修饰符解析 .prevent .passive

vue 修饰符解析 .prevent .passive

作者: 心淡然如水 | 来源:发表于2019-10-10 16:58 被阅读0次

简介

Vue提供了事件绑定的语法糖,我们在标签中可直接使用形如v-on:click,@click,@focus的形式绑定事件监听器,并且可以使用修饰符对事件进行option设置。本次解释下prevent 与passive的修饰符。prevent 是拦截默认事件passive是不拦截默认事件。

prevent

某些标签拥有自身的默认事件,如a[href="#"],button[type="submit"] 这种标签在冒泡结束后会开始执行默认事件。注意默认事件虽然是冒泡后开始,但不会因为stop阻止事件传递而停止。

图1.默认事件与事件传递

如上图1,我在第三次捕获后终止事件传递,但是最后输出了1 2 3 x

图2.拦截默认事件

如上图2,我们在a标签上的click加个prevent的修饰符,最后输出 1 2 3 4 4 3 2 1。默认的href里的事件没有触发。

passive

        passive这个修饰符会执行默认方法。你们可能会问,明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。

        【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉到页面卡顿。】

通俗点说就是每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作。

        这里一般用在滚动监听,@scoll,@touchmove 。因为滚动监听过程中,移动每个像素都会产生一次事件,每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过,可以大大提升滑动的流畅度。

注:passive和prevent冲突,不能同时绑定在一个监听器上。

解析得非常清楚得文章,转载自-https://www.jianshu.com/p/b12d0d3ad4c1

相关文章

  • vue 修饰符解析 .prevent .passive

    简介 Vue提供了事件绑定的语法糖,我们在标签中可直接使用形如v-on:click,@click,@focus的形...

  • Vue修饰符

    1.常用事件修饰符 .stop .prevent .capture .self .once .passive 2....

  • vue 修饰符

    1.常用事件修饰符.stop.prevent.capture.self.once.passive

  • Vue事件修饰符(二).prevent .passive

    简介 Vue提供了事件绑定的语法糖,我们在标签中可直接使用形如v-on:click,@click,@focus的形...

  • Vue中关于v-on的事件修饰符

    1.stop 2.prevent 3.capture 4.self 5.once 6.passive 使用修饰符时...

  • vue事件、指令、钩子

    vue事件、指令、钩子 vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture:捕...

  • vue

    vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture 捕获.self ...

  • vue 的修饰符

    vue 的修饰符有 once stop prevent captrue self stop 阻止冒泡 onc...

  • vue

    vue的事件修饰符: .stop:阻止冒泡 .prevent:阻止默认行为 .capture .self .onc...

  • Vue修饰符

    事件修饰符 .prevent修饰符 .stop修饰符 .once修饰符 prevent修饰符 用于阻止默认事件行为...

网友评论

      本文标题:vue 修饰符解析 .prevent .passive

      本文链接:https://www.haomeiwen.com/subject/gzsapctx.html