vue中的事件修饰符

最新推荐文章于 2024-08-24 12:37:57 发布

小二，来杯奶茶

最新推荐文章于 2024-08-24 12:37:57 发布

阅读量79

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46030955/article/details/123673606

版权

1、prevent

---阻止事件的默认行为

2、stop

----阻止事件冒泡

3、once

---事件只能触发一次

4、capture

----使用事件捕获模式

5、self

----只有event.target（按钮中的mouseevent，点击按钮调函数时会默认传给你）是当前操作的元素才操作

6、passive

---事件的默认行为立即执行，无需等待事件回调执行完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<style>
    *{
        margin-top: 20px;
    }
    .demo{
        height: 100px;
        width: 200px;
        background-color: aqua;
    }
</style>
<body>
<div id="app">
<!--    prevent阻止默认事件，写了这个a标签便不会有默认跳转的行为-->
    <a href="https://www.baidu.com/" @click.prevent="myFunction">{{name}}</a>
<!--    once事件只触发一次-->
    <button @click.once="myFunction2">点击按钮</button>
<!--stop阻止事件冒泡-->
    <div class="demo" @click="myFunction3">
        <button @click.stop="myFunction3">点击按钮2</button>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'事件修饰符的作用'
        },
        methods:{
            myFunction(){
                alert("你好，世界")
            },
            myFunction2(){
                alert("我怎么打不开")
            },
            myFunction3(){
                alert("怎么只打开一次")
            }
        }
    })
</script>
</body>
</html>

小二，来杯奶茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的事件修饰符

1、prevent---阻止事件的默认行为2、stop----阻止事件冒泡3、once---事件只能触发一次4、capture----使用事件捕获模式5、self----只有event.target（按钮中的mouseevent，点击按钮调函数时会默认传给你）是当前操作的元素才操作6、passive---事件的默认行为立即执行，无需等待事件回调执行完成<!DOCTYPE html><html lang="en"><head&
复制链接

扫一扫