1 ano atrás · 5979aa288f
--- a/day20/css/10.点透事件.css
+++ b/day20/css/10.点透事件.css
@@ -0,0 +1,58 @@
 
				+* {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+    /* 触摸行为 */
			
 
				+    touch-action: none;
			
 
				+}
			
 
				+ #container {
			
 
				+    width: 100%;
			
 
				+    position: relative;
			
 
				+ }
			
 
				+
			
 
				+ #under {
			
 
				+    width: 90%;
			
 
				+    height: 500px;
			
 
				+    text-align: center;
			
 
				+    line-height: 500px;
			
 
				+    background: #eee;
			
 
				+    margin: 30px auto 1000px;
			
 
				+ }
			
 
				+ #dialog {
			
 
				+    width: 80%;
			
 
				+    background: #fff;
			
 
				+    height: 240px;
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    margin-top: -120px;
			
 
				+    margin-left: -40%;
			
 
				+    z-index: 99;
			
 
				+ }
			
 
				+
			
 
				+ #title {
			
 
				+    width: 100%;
			
 
				+    height: 200px;
			
 
				+    line-height: 200px;
			
 
				+    text-align: center;
			
 
				+ }
			
 
				+#action {
			
 
				+    position: absolute;
			
 
				+    bottom: 30px;
			
 
				+    left: 34%;
			
 
				+}
			
 
				+ #close {
			
 
				+    border: 0;
			
 
				+    width: 100px;
			
 
				+    height: 35px;
			
 
				+    background: #00f;
			
 
				+    color: #fff;
			
 
				+ }
			
 
				+ #mask {
			
 
				+    width: 100%;
			
 
				+    background: rgba(0,0,0,.5);
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+ }
			
--- a/day20/html/10.点透事件.html
+++ b/day20/html/10.点透事件.html
@@ -0,0 +1,22 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <link rel="stylesheet" href="../css/10.点透事件.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="container">
			
 
				+        <div id="under">底层元素</div>
			
 
				+        <div id="dialog">
			
 
				+            <div id="title">弹出层</div>
			
 
				+            <div id="action">
			
 
				+                <button id="close">关闭</button>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div id="mask"></div>
			
 
				+    </div>
			
 
				+    <script src="../js/10.点透事件.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day20/html/8.padding-top.html
+++ b/day20/html/8.padding-top.html
--- a/day20/html/9.touch.html
+++ b/day20/html/9.touch.html
@@ -0,0 +1,44 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        #box {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background: #00f;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        touchstart：手指触摸到一个 DOM 元素时触发。
			
 
				+        touchmove：手指在一个 DOM 元素上滑动时触发。
			
 
				+        touchend：手指从一个 DOM 元素上移开时触发。
			
 
				+
			
 
				+        每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）
			
 
				+        touches：当前位于屏幕上的所有手指的列表。
			
 
				+        targetTouches：位于当前DOM元素上手指的列表。
			
 
				+        changedTouches：涉及当前事件手指的列表
			
 
				+     -->
			
 
				+    <div id="box"></div>
			
 
				+    <script>
			
 
				+        var box = document.getElementById("box");
			
 
				+        // box.onclick = function() {
			
 
				+        //     console.log('点击')
			
 
				+        // } 
			
 
				+        box.ontouchstart = function(event) {
			
 
				+            console.log(event,'触发')
			
 
				+        }
			
 
				+        box.ontouchmove = function() {
			
 
				+            console.log("滑动")
			
 
				+        }
			
 
				+        box.ontouchend = function() {
			
 
				+            console.log("离开")
			
 
				+        }
			
 
				+        // click 事件 有300ms的延迟
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day20/js/10.点透事件.js
+++ b/day20/js/10.点透事件.js
@@ -0,0 +1,27 @@
 
				+var close = document.getElementById("close");
			
 
				+var under = document.getElementById("under");
			
 
				+
			
 
				+close.onclick = function(event) {
			
 
				+    // 取消默认事件
			
 
				+    event.preventDefault();
			
 
				+    document.getElementById("dialog").style.display = 'none';
			
 
				+    document.getElementById("mask").style.display = 'none';
			
 
				+}
			
 
				+
			
 
				+under.onclick = function() {
			
 
				+    alert("弹出");
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * touchstart => touchmove => touchend
			
 
				+ */
			
 
				+/**
			
 
				+ * 点透事件
			
 
				+ * 两层元素叠加到一起
			
 
				+ * 第一层是touch事件
			
 
				+ * 第二层是click事件 或者 a标签
			
 
				+ * 
			
 
				+ * 解决点透事件
			
 
				+ * 1.把click换成touch事件
			
 
				+ * 2.加上取消默认事件 event.preventDefault()
			
 
				+ */