vue之事件修饰符的使用

vue中可以使用 v-on 指令绑定事件监听器,监听 DOM 事件,而在事件处理的程序中,为了能有更纯粹的数据逻辑,vue还提供了很多事件修饰符,来代替处理一些 DOM 事件细节。

我的其他文章,也可以了解一下:
【使用vue-cli(vue脚手架)快速搭建项目】://www.greatytc.com/p/1ee1c410dc67
【vue之父子组件间通信实例讲解(props、ref 、 emit )】:
//www.greatytc.com/p/91416e11f012
【vue之将echart封装为组件】:
//www.greatytc.com/p/ec39019e2141
【理解vue实例的生命周期和钩子函数】:
//www.greatytc.com/p/98517bd49179

事件修饰符:

  • .stop:防止事件冒泡,等同于JavaScript中的event.stopPropagation()
  • .prevent:防止执行预设的行为,等同于JavaScript中的event.preventDefault()
  • .capture:捕获冒泡
  • .self:将事件绑定到自身,只有自身才能触发
  • .once:只触发一次
  • .passive:不阻止事件的默认行为
(1).stop

防止事件冒泡,通俗来说就是阻止事件向父元素传递,阻止任何父事件处理程序被执行,等同于JavaScript中的event.stopPropagation()。看看下面这个例子:

<!-- HTML -->
<div id="demo">
    <div @click="outer" style="padding: 20px;background-color:deepskyblue">
      <div  @click="middle" style="padding: 10px;background-color: darkcyan">
          <button @click="inner">click</button>
      </div>
    </div>
</div>
<!-- JS -->
    var demo = new Vue({
        el: '#demo',
        methods: {
            inner: function () {
                console.log ('(1)inner')
            },
            middle: function () {
                console.log ('(2)middle')
            },
            outer: function () {
                console.log ('(3)outer')
            }
        }
    })

这个例子中,在button标签外包了两层div,每层都绑定了监听器,监听click事件,这时候我们点击最内层的按钮,你从控制台可以看见,外面两层对应的点击事件也被触发了。


image.png

那如果我们给最内层按钮的事件绑定加上stop修饰符,像如下修改,就不会向上冒泡了

   <button @click.stop="inner">click</button>
image.png
(2).prevent

某些标签拥有自身的默认事件,比如<a>标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的,但不会因为stop而停止执行。阻止执行这类预设的行为,.prevent就派上用场了。

 <a href="http://www.baidu.com" @click.prevent>点击跳转</a>

试试上面这个小例子,你会发现点击<a>标签的时候,不会再发生跳转了。

(3).capture

捕获冒泡,即冒泡发生时,有.capture修饰符的dom元素会优先执行。我们还是用回stop时候的例子,正常情况下点击最内层按钮,控制台打印的信息是这样的:


image.png

我们稍作改变,将中间层的点击事件加上.capture修饰符

    <div @click="outer" style="padding: 20px;background-color:deepskyblue">
      <div @click.capture="middle" style="padding: 10px;background-color: darkcyan">
          <button @click="inner">click</button>
      </div>
     </div>

这时候打印顺序发生改变了,中间层的信息被优先打印出来,然后再按正常顺序执行触发的事件


image.png

那多个.capture修饰符的时候呢?

    <div @click.capture="outer" style="padding: 20px;background-color:deepskyblue">
      <div @click.capture="middle" style="padding: 10px;background-color: darkcyan">
          <button @click="inner">click</button>
      </div>
    </div>
image.png

结果是,带修饰符的从外到内依次执行,然后再按正常顺序执行触发的事件。

(4).self

将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响。

<!-- HTML -->
<div id="demo">
    <div @click="outer" style="padding: 20px;background-color:deepskyblue">
      <div  @click.self="middle" style="padding: 10px;background-color: darkcyan">
          <button @click="inner">click</button>
      </div>
    </div>
</div>
<!-- JS -->
    var demo = new Vue({
        el: '#demo',
        methods: {
            inner: function () {
                console.log ('(1)inner')
            },
            middle: function () {
                console.log ('(2)middle')
            },
            outer: function () {
                console.log ('(3)outer')
            }
        }
    })

给中间的div加上self修饰符,然后点击里层的按钮,发现中间层的事件没有被触发,直接跳过了:


image.png

而直接点深色部分,即中间层div对应的区域,才能触发其事件:


image.png
(5).once

这个比较好理解,加上once修饰符以后事件只触发一次,但是不影响事件的冒泡,上层的事件仍然会被触发,并且页面刷新后这个次数会重置。下面是不停点击按钮的效果:

 <div @click="outer" style="padding: 20px;background-color:deepskyblue">
      <div @click="middle" style="padding: 10px;background-color: darkcyan">
          <button @click.once="inner">click</button>
      </div>
    </div>
image.png
(6).passive

.passive是2.3.0 新增的修饰符,是用来告诉浏览器你不想阻止事件的默认行为。

这里涉及到一个问题,为什么需要告诉浏览器不阻止事件的默认行为?
原因是这样的,浏览器只会在每次触发监听器的时候,才去判断这次是否有调用preventDefault()来阻止默认行为。这样的判断,在某些场景下会影响交互,像用户通过手势滑动页面时,就没法迅速滚动了,而使用.passive就可以提前告诉浏览器,我们没有用preventDefault阻止默认动作,你也不用反复去判断了,从而提高性能解决卡顿。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。