Vue事件修饰符(三).self连缀

简介

        Vue提供了事件绑定的语法糖,我们在标签中可直接使用形如v-on:click,@click,@focus的形式绑定事件监听器,并且可以使用修饰符对事件进行option设置。本次解释self修饰符以及self连缀的情况。

self

        self 的作用是,只在目标Dom是绑定了动作的Dom才触发。栗子如下图。我给2号图层的捕获监听与3号图层的冒泡监听加上self修饰符。当我点击最里层的a标签时,控制台会输出1 3 4 4 2 1 。因为我们本次的目标Dom是4号a标签,所以我们绑定在2号与3号的监听在有self修饰时不触发。

        同理当我们点击3号图层时,控制台会输出1 3 3 2 1 。这时,3号是目标Dom所以@click.self="log(3)"触发了。

图1.self举例

连缀

        vue中事件修饰符时可以连缀的,修饰符的顺序有时会影响最终结果。例如prevent与self组合。如下图2,图3。prevent.self与self.prevent产生的结果是有差距的。self写在prevent前时,prevent会被self影响,只有我们直接点击这个目标时才会触发prevent。点击5号通过冒泡传递过来时,self拦截住了监听,后面的prevent也一起失效了。

图a.结果差别
图2.prevent.self
图3.self.prevent

        .stop也会因为连缀在self可能失效。

前端豆知识,很小却有用

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

推荐阅读更多精彩内容

  • 一转眼,七月已过,浓浓的白云与炽热的太阳交错融合在一起。我习惯这样的天气,我喜欢七月,在炎热的夏天里感受汗流浃背样...
    冰磊阅读 189评论 0 0
  • 这些天美滋写作业不邋邋遢遢了,就是写完作业不检查,就跟邻居小朋友一起玩去了。语文两篇背诵她也没背,我把她追回来...
    刘美滋阅读 182评论 0 0