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