Js、Vue阻止事件冒泡行为

半截的诗--

已于 2023-04-27 14:08:23 修改

阅读量304

点赞数

分类专栏： JS Vue 文章标签： javascript vue.js 前端

于 2022-09-13 11:00:31 首次发布

本文链接：https://blog.csdn.net/m0_65992672/article/details/126829252

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 1 订阅

订阅专栏

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>