好久没更新了

2021-03-23 10:58:10 +08:00
parent eca64f86c0
commit 9bf8e8d020
123 changed files with 24337 additions and 214 deletions
--- a/js/demo/maopao.html
+++ b/js/demo/maopao.html
@@ -0,0 +1,57 @@
+<!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>Document</title>
+    <style>
+        .box{
+            width: 500px;
+            height: 500px;
+            border: 1px solid black;
+        }
+        .box1{
+            width: 300px;
+            height: 300px;
+            background: pink;
+        }
+        .box2{
+            width: 100px;
+            height: 100px;
+            background: gold;
+        }
+    </style>
+    <script>
+        function box(){
+            console.log("box被点击了")
+        }
+        function box1(){
+            console.log("box1被点击了")
+            return
+        }
+        function box2(){
+            console.log("box2被点击了")
+            event.stopImmediatePropagation();
+        }
+        function box3(){
+            console.log("box1被点击了2")
+            event.stopPropagation();
+        }
+    </script>
+</head>
+<body>
+    <div class="box" onclick="box()">
+        <div class="box1" onclick="box1(),box3()">
+            <div class="box2" onclick="box2()"></div>
+        </div>
+       
+    </div>
+
+    <div>
+        总结：点击box2时，会接连触发 box2()  -> box1() -> box()  整个过程叫做冒泡
+        <p> 阻止冒泡： event.stopImmediatePropagation()  event.stopPropagation()</p>
+        冒泡和捕获不会同时发生
+    </div>
+</body>
+</html>