vue prevents events from bubbling

Keywords: Vue

Using stop and capture to terminate event bubbling and capture events

Event bubbling transfer from bottom up

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue Prevent events from bubbling</title>
    <script src="./vue.js" charset="utf-8"></script>
</head>

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

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

</html>

Click three and three pop ups will appear

three，two，one

After adding stop, there will only be three bubbles that terminate the event

<div @click.stop="three">
                three
</div>

Same effect as event function using event

In the Microsoft model, you must set the cancelBubble property of the event to true
window.event.cancelBubble = true

In the w3c model you have to call the stopPropagation() method of the event
e.stopPropagation()

Capture events from top to bottom, using capture to represent capture events

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

Click three, the result is one, three

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

Click three and the result is one, two, three,

Click two and the result is one, two

Posted by jzhang1013 on Thu, 30 Apr 2020 04:25:04 -0700

Programmer Group

vue prevents events from bubbling

Hot Keywords