vue捕获新事件02

之前的第一篇文章提到了，如何用冒泡方法捕获一个div下的多个按钮的事件，那么今天来讲讲如何停止继续往上再冒泡，就是说，我一个div下有很多input按钮，我点击了以后，div捕获了。然后就不再往上报了。我div自己就能处理好了，不用再麻烦上面的父节点了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div @click="func2">
            <div @click.stop="func($event)">
                <input type="button" value="button01" />
                <input type="button" value="button02" />
                <input type="button" value="button03" />
            </div>
        </div>
    </div>
    <script>
        var m = {

        }

        var vm = new Vue({
            el: "#app",
            data: m,
            methods: {
                func: function (event) {
                    console.log(event, event.target);
                    console.log('冒泡中...')
                },
                func2: function () {
                    console.log("冒泡2中...")
                }
            }
        })
    </script>

</body>

</html>

　　
主要做了两处变更：

 

 

 测试一下，会不会打印    冒泡2中....

 

 测试发现，因为第一层div使用了stop方法，所以最外层的div没有收到点击事件，所以没有触发相应的点击方法。今天演示到此结束。

posted @ 2021-02-24 11:25  田野与天  阅读(101)  评论(0)    收藏  举报