vue中@click与它的事件修饰符@click.stop、@click.prevent
作者:互联网
@click.stop :阻止事件冒泡
<template> <div @click="outside"> <el-button @click="inside">按钮</el-button> </div> </template> <script> export default { methods: { outside() { alert("点击div"); }, inside() { alert("点击按钮"); } }, }; </script>
结果:先弹出“点击按钮”,再弹出“点击div”
<template> <div @click="outside"> <el-button @click.stop="inside">按钮</el-button> </div> </template> <script> export default { methods: { outside() { alert("点击div"); }, inside() { alert("点击按钮"); } }, }; </script>
结果:只弹出“点击按钮”
@click.prevent :阻止事件的默认行为
有些标签属性自带了事件,但我们有时并不需要那些事件,因此就需要阻止默认事件,只执行我们绑定的事件
<a href="http://www.baidu.com" @click.prevent="search">百度一下</a> //阻止a标签跳转,仅执行函数search
<form action="/xxx" @submit.prevent="updata"> <input type="submit" value="注册" /> //阻止表单提交,仅执行函数updata </form>
标签:prevent,修饰符,alert,点击,事件,按钮,div,click 来源: https://www.cnblogs.com/emmamayday/p/15386776.html