devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Js、Vue阻止事件冒泡行为_stoppropagation vue

作者：繁依Fanyi0 | 2024-02-13 01:55:07

赞

踩

stoppropagation vue

目录

Js阻止事件冒泡行为 

Vue阻止事件冒泡行为 

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>js阻止事件冒泡行为</title>
  8.     <style>
  9.         #outterDiv{
  10.             width: 500px;
  11.             height: 500px;
  12.             background:red;
  13.             overflow: hidden;
  14.         }
  15.         #innerDiv{
  16.             width: 200px;
  17.             height: 200px;
  18.             background:green;
  19.             margin: 150px auto;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div id="outterDiv">
  25.         <div id="innerDiv"></div>
  26.     </div>
  27. </body>
  28.     <script>
  29.         var outter = document.querySelector("#outterDiv")
  30.         var innerer = document.querySelector("#innerDiv")
  31.         outter.onclick=function(){
  32.             console.log("外层div outter事件触发了");
  33.  
  34.         }
  35.         innerer.onclick=function(){
  36.             console.log("内层div innerer事件触发了");
  37.             event.stopPropagation() //阻止事件冒泡
  38.         }
  39.     </script>
  40. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>vue阻止冒泡行为</title>
  8.     <script src="../vue库/vue.js"></script>
  9.     <style>
  10.         #outterDiv{
  11.             width: 500px;
  12.             height: 500px;
  13.             background:red;
  14.             overflow: hidden;
  15.         }
  16.         #innerDiv{
  17.             width: 200px;
  18.             height: 200px;
  19.             background:green;
  20.             margin: 150px auto;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <!-- 
  26.         Vue组件事件冒泡有两种 注：在子级标签中阻止
  27.         @click.stop="inner"
  28.         event.stopPropagation()
  29.      -->
  30.     <div id="app">
  31.          <div id="outterDiv" @click="outter">
  32.             <div id="innerDiv" @click.stop="inner"></div>
  33.          </div>
  34.     </div>
  35.    
  36. </body>
  37.     <script>
  38.         var app = new Vue({
  39.             el:"#app",
  40.             methods: {
  41.                 outter(){
  42.                     console.log("外层div outter事件触发了");
  43.                     
  44.                 },
  45.                 inner(){
  46.                     console.log("内层div outter事件触发了");
  47.                     // event.stopPropagation()
  48.                 }
  49.             },
  50.         })
  51.     </script>
  52. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/79355
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号