vue 阻止事件冒泡和取消默认行为

阿豪boy

于 2018-01-30 16:15:00 发布

阅读量127

点赞数

文章标签： vue js php openstack ajax

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066930

版权

原文链接: vue 阻止事件冒泡和取消默认行为

上一篇: vue 使用ref 让父组件调用子组件的方法

下一篇: vue v-if,v-show区别

stop阻止冒泡

prevent取消默认行为，比如超链接不会跳转等。

capture监听事件

使用不同的组合可以形成不同的事件链

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue阻止事件冒泡</title>
    <script src="./vue.js" charset="utf-8"></script>
</head>

<body>
<div id="app" @click.capture="one">
    one
    <div @click.stop="two">
        two
        <div @click.stop="three">
            three
        </div>
    </div>

    <a href="http://www.zhihu.com" @click="one">知乎</a>
    <br/>
    <a href="http://www.zhihu.com" @click.prevent="one">知乎</a>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        methods: {
            one: function () {
                alert("one")
            },
            two: function () {
                alert("two")
            },
            three: function () {
                alert("three")
            }
        }
    })
</script>

</html>