Why event bindings in vue do not follow the DOM standard event model

clipboard.png

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

< / 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: "-sharpapp",
        data: {

        },
        methods: {
            span() {
                console.log("span");
            },
            div() {
                console.log("div");

            },
        }
    })
</script>

< / body >

< / html >
trigger span, first and then div

Mar.26,2021

Yes, if you need to monitor and capture, use @ click.capture


js processing events are all in the bubbling phase by default (so is vue), so span is triggered first and then triggered. In div,vue, events can be triggered during the capture phase through event modifiers

<div :click.capture="handleClick">...</div>
The

event is a bubbling mechanism. Click on the outer layer, trigger the inside first, and bubble to the parent. It's the same with dom.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2b0b7-2ba5b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2b0b7-2ba5b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?