Vue事件修饰符

  • 如果想要阻止执行事件默认行为——例如:当链接被单击时阻止页面的跳转——可以使用.prevent修饰符:

  • 如果想要阻止事件继续传播,以避免在父级元素上触发事件,可以使用.stop修饰符。

  • 如果想要只在第一次触发事件的时候触发事件侦听器,可以使用.once修饰符。

  • 如果想要使用捕获模式,也就是说,事件会在传递到当前元素的下级元素前触发(而在冒泡模式中,事件会现在当前元素上触发,然后沿DOM树向上冒泡),可以使用.capture修饰符。
  • 如果想要只监听元素自身而不是它的子元素上触发事件(也就是说,event.target就是绑定该侦听器的元素时),可以使用.self修饰符。

也可以只设置事件名和修饰符而不传入侦听器,而且可以将修饰符串联起来使用。例如,下面这个例子会阻止单击事件沿DOM树向下传递,但只在第一次触发时有效:

除了上述事件修饰符,还有一些按键修饰符。它们用在键盘事件上,只有在特定按键按下时才会触发事件。看下面这个例子:

...

上面这个例子中,if语句中的的代码只有当keyCode为13的按键——也就是Enter键——被按下时才会执行。但是,Vue内置了一种基于修饰符的方法来处理这种情况。可以将按键键值作为修饰符,例子如下:


另外如果想在只有被指定的按键被按下但没有其他按键被按下的时候才触发事件侦听器,可以使用.exact修饰符。例如:


当只有Enter键被按下,且没有其他任何按键——例如Ctrl+Enter——被按下时,侦听器才会被触发。

你可能感兴趣的:(Vue.js)