事件修饰符

2023-06-21 08:23| 来源: 网络整理| 查看: 265

事件修饰符顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

事件修饰符有：

.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式.self只当事件在该元素本身(不是子元素)触发时回调.once事件只触发一次

1.阻止冒泡

点击 var vm=new Vue({ el:"app", data:{}, methods:{ clickDiv(){ console.log("点击了div") }, clickButton(){ console.log("点击了button") } } })

当点击按钮的时候，浏览器控制台除了会输出“点击了button”还会输出“点击了div”，这是因为button按钮是div里的元素节点，当你点击button的时候，事件会向上冒泡，触发包含它的父元素所定义的事件，这就是冒泡事件。如果想阻止冒泡事件就需用到“.stop”修饰符。

2.阻止默认事件什么是默认事件？如：点击a链接自动进行跳转、点击submit按钮自动提交表单等。这里以a链接为例：

有问题，问百度 new Vue({ el:"app", data：{}, methods:{ linkclick(){ console.log("点击了a链接") } } })

加上.prevent修饰符后，a链接不能进行跳转，但是仍然可以触发click事件。

3.事件捕获还记得冒泡事件中触发的顺序吗？即：先触发button按钮的点击事件，然后再触发button父元素div的点击事件；如果我想点击button之后先触发父元素div的点击事件，然后再触发子元素button的点击事件呢？

即：在事件触发中进行捕获，优先执行含有".caputre"修饰符的事件。

4.只当事件在该元素本身触发时触发回调

点击

我们在父元素div里加了".self"，这样父元素的点击事件只有在点击自身元素的情况下才可以触发，点击其他任何元素（如子元素button）都不会触发包含修饰符".self"的元素事件。

5.事件只触发一次

有问题，问百度 el:"#app", data:{}, methods:{ clicklink(){ console.log("点击了a链接") } } 这里a链接点击事件使用了两个事件修饰符，说明事件修饰符可以并列使用。这里的修饰符".once"的作用是让默认阻止行为(.prevent)只生效一次，所以当我们第一次点击a链接的时候，浏览器控制台会输出"点击了a链接",但是页面不会跳转，当我们再次点击a链接的时候页面会跳转到百度页面，这就是".once"修饰符的作用。“.prevent"和”.once"的位置调换后，即：@click.once.prevent=“clicklink()”，执行的结果是不一样的。

【本文地址】

公司简介

联系我们