VUE中事件修饰符：stop prevent self capture

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_30274627

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zzsdream/p/10922100.html

该博客为转载内容，转载自https://www.cnblogs.com/zzsdream/p/10922100.html ，涉及JavaScript相关知识。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修饰符：self capture stop prevent的使用</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
    <!--第一种情况-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click="aEven">百度链接</a>-->
    <!--</div>-->
    <!--stop的使用：阻止事件冒泡的发生-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.stop="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--prevent的使用：阻止默认事件的发生-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.stop.prevent="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--self的使用：只有点击他本身时才去执行，点击他的子元素不去执行-->
    <!--<div @click.self="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.prevent="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件-->
    <div @click.capture="divEven" style="border:1px #188eee solid;">
        <a href="www.baidu.com" @click.prevent="aEven">百度链接</a>
    </div>
</div>
<script>
    new Vue({
        el:"#demo",
        methods:{
            divEven(){
                alert("我是div的事件");
            },
            aEven(){
                alert("我是a链接事件");
            }
        }
    });
</script>
</body>
</html>