Vue事件修饰符

在vue中为我们提供了六种修饰符,分别是:

  • prevent:阻止默认事件

  • stop:阻止事件冒泡

  • once:事件只触发一次

  • capture:使用事件的捕获模式

  • self:只有event.target是当前操作的元素时才触发事件

  • passive:事件的默认行为立即执行,无需等待事件回调执行完毕

下面就具体来说说六种修饰符的具体用法

prevent

prevent方法是用来阻止默认事件。我们知道在html中有很多标签都有自己默认的事件。比如a标签点击时会跳转到目标链接,from里面的提交按钮点击后会将表单内容提交到目标地址等等,这些都属于默认事件。但是有时候我们不希望这些默认事件执行,那么这个时候我们就能用到prevent去阻止默认事件执行

//js中的用法,是通过event中的preventDefault()方法去阻止的
 var a=document.querySelector('a');
 a.onclick = function (e) {
        e.preventDefault()
    }
//vue中用法
百度

stop

stop方法是用来阻止事件冒泡。我们在学习js时有了解到事件发生时会经历捕获与冒泡阶段,当父元素与子元素同时绑定了相同的事件时当触发子元素的事件时父元素的事件也会被触发,就会出现意料之外的效果,那么就需要我们进行设置避免这种意外产生,我们就需要用到stop这一修饰符

//js中,通过event中的stopPropagation()方法去阻止
var button=document.querySelector('button');
 button.onclick = function (e) {
        e.stopPropagation()
    }
//vue中使用stop
     
               
 

因为冒泡是从最底层元素往上走,所以只要往最底层加stop就可以了。如果div上面还有一层同时也加了click事件那么div也要加stop修饰符

once

once用于实现绑定的事件只触发一次的效果,如一个提交按钮在页面打开后只允许提交一次,后面再提交就不再实现底层逻辑代码。

capture

capture用于事件的捕获模式。我们知道js是在冒泡阶段才开始处理事件,如果我们想使一个事件在捕获阶段就被执行处理就可以加上capture修饰符。如以下代码,在未加修饰符的情况下输出的应该是

我是按钮
我是div

而在div上加了修饰符后输出的结果便是

我是div
我是按钮

     
               
 

你可能感兴趣的:(Vue,vue.js,javascript,前端)