Js、Vue阻止事件冒泡行为-蒲公英云

Js、Vue阻止事件冒泡行为

忘是亡心i 2024-04-07 15:23 207阅读 0赞

Js阻止事件冒泡行为

Vue阻止事件冒泡行为

以下是Js阻止事件冒泡行为 event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js阻止事件冒泡行为</title>
    <style>
        #outterDiv{
            width: 500px;
            height: 500px;
            background:red;
            overflow: hidden;
        }
        #innerDiv{
            width: 200px;
            height: 200px;
            background:green;
            margin: 150px auto;
        }
    </style>
</head>
<body>
    <div id="outterDiv">
        <div id="innerDiv"></div>
    </div>
</body>
    <script>
        var outter = document.querySelector("#outterDiv")
        var innerer = document.querySelector("#innerDiv")
        outter.onclick=function(){
            console.log("外层div outter事件触发了");
        }
        innerer.onclick=function(){
            console.log("内层div innerer事件触发了");
            event.stopPropagation() //阻止事件冒泡
        }
    </script>
</html>

以下是Vue阻止事件冒泡行为 event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue阻止冒泡行为</title>
    <script src="../vue库/vue.js"></script>
    <style>
        #outterDiv{
            width: 500px;
            height: 500px;
            background:red;
            overflow: hidden;
        }
        #innerDiv{
            width: 200px;
            height: 200px;
            background:green;
            margin: 150px auto;
        }
    </style>
</head>
<body>
    <!-- 
        Vue组件事件冒泡有两种 注：在子级标签中阻止
        @click.stop="inner"
        event.stopPropagation()
     -->
    <div id="app">
         <div id="outterDiv" @click="outter">
            <div id="innerDiv" @click.stop="inner"></div>
         </div>
    </div>
</body>
    <script>
        var app = new Vue({
            el:"#app",
            methods: {
                outter(){
                    console.log("外层div outter事件触发了");
                },
                inner(){
                    console.log("内层div outter事件触发了");
                    // event.stopPropagation()
                }
            },
        })
    </script>
</html>