事件修饰符stop在vue.js中的功能应用方法-群英

您现在的位置是：群英 > 开发技术 > web开发

事件修饰符stop在vue.js中的功能应用方法

Admin发表于 2022-05-26 17:13:21793 次浏览

上一篇： MVC之如何利用在mvcpager控件中实现分页

下一篇：有序数组中的重复值怎么用JS删除

在这篇文章中，我们将学习“事件修饰符stop在vue.js中的功能应用方法”的相关知识，下文有详细的介绍及示例，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望对大家阅读完这篇能有所获。

修饰符.stop的用法

.stop修饰符是用来阻止冒泡事件的发生的。

用法如下

<a v-on:click.stop="dothis"></a>

下面是全部的代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="vue.js"></script>
</head>
<style>
    #gpa {
        margin: 0 auto;
        width: 100px;
        height: 60px;
        background: green;
    }
    #pa {
        width: 60px;
        height: 40px;
        background: pink;
        margin: 0 auto;
        text-align: center
    }
</style>
<body>
//--------------------------------重点是这一部分代码。
<div id="gpa" v-on:click="dodo">
    <div id="pa" v-on:click="dothat">
        <a  v-on:click.stop="dothis" href="http://www.baidu.com" rel="external nofollow" >百度</a>
    //点击百度的时候不发生冒泡，执行dothis函数，然后跳转到百度首页。
    </div>
    //点击粉色部分，即pa部分，发生冒泡，执行dothat，dodo函数。
</div>
</body>
<script>
    var gpas = new vue({
        el:'#gpa',
        data:{
        },
        methods:{
            dothis:function(){
                alert("dothis");
            },
            dothat:function (){
                alert("dothat")
            },dodo:function(){
                alert("dodo")
            }
        }
    })
    </script>
</html>

stop事件修饰符

修饰符	说明
.stop	阻止冒泡

stop事件修饰符具体介绍

.stop

.stop用来防止冒泡

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
            .inner {
              height: 150px;
              background-color: gold;
            }
        
            .outer {
              padding: 40px;
              background-color: red;
            }
          </style>
</head>
<body>
    
    <div id="app">
            <div class="inner" @click="div1handler">
                    <input type="button" value="点击" @click="btnhandler">
            </div>
    </div>
    <script>
        var vm = new vue({
            el:"#app",
            data: {
            },
            methods: {
                div1handler() {
                    console.log('这是触发了 inner div 的点击事件')
                },
                btnhandler() {
                    console.log('这是触发了 btn 按钮 的点击事件')
                }
            }
        })
    </script>
</body>
</html>

页面操作效果

我们看到不光点击按钮的点击事件触发了，而且父容器div的点击事件也触发了，这时我们就可以使用.stop来阻止这个冒泡了，如下

在访问测试

通过输出可以看到点击事件没有往上冒泡了！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持萬仟网。

以上就是关于“事件修饰符stop在vue.js中的功能应用方法”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： vue.js,修饰符,stop

上一篇： MVC之如何利用在mvcpager控件中实现分页

下一篇：有序数组中的重复值怎么用JS删除