为什么vue中的事件绑定不遵循DOM标准的事件模型

https://img4.mukewang.com/5cadae830001dc6408000362.jpg

<!DOCTYPE html>

<html>


<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>

</head>


<body>


<!-- 开发环境版本,包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

    <div @click="div">

        <span @click="span">1231</span>


    </div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {


        },

        methods: {

            span() {

                console.log('span');

            },

            div() {

                console.log('div');


            },

        }

    })

</script>

</body>


</html>

先触发了span, 再触发div


不负相思意
浏览 724回答 3
3回答

RISEBY

js处理事件默认都是在冒泡阶段(vue也是),所以会先触发span再触发div,vue中可以通过事件修饰符让事件在捕获阶段触发<div&nbsp;:click.capture="handleClick">...</div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript