首頁 探索 說明
登入
lovecoding
/
VIP32
10
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

移动端

e 1 年之前
父節點
490c42ee38
當前提交
2736425fe0
共有 3 個文件被更改，包括 165 次插入 和 0 次删除
統一視圖 顯示文件統計
  1. 23 0
      移动端/7.padding-top.html
  2. 40 0
      移动端/8.touch.html
  3. 102 0
      移动端/9.点透事件.html

+ 23 - 0
移动端/7.padding-top.html
查看文件 

@@ -0,0 +1,23 @@
 
+<!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>
 
+        *{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #box {
 
+            width: 300px;
 
+            /* height: 200px; */
 
+            padding-top: 10vh;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+</body>
 
+</html>

+ 40 - 0
移动端/8.touch.html
查看文件 

@@ -0,0 +1,40 @@
 
+<!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: #0f0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        touchstart：手指触摸到一个 DOM 元素时触发。
 
+        touchmove：手指在一个 DOM 元素上滑动时触发。
 
+        touchend：手指从一个 DOM 元素上移开时触发。
 
+        每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）
 
+        touches：当前位于屏幕上的所有手指的列表。
 
+        targetTouches：位于当前DOM元素上手指的列表。
 
+        changedTouches：涉及当前事件手指的列表  
+        click会有200-300ms延迟
 
+     -->
 
+     <div id="box"></div>
 
+     <script>
 
+        var box = document.getElementById("box");
 
+        box.ontouchstart = function() {
 
+            console.log("开始");
 
+        }
 
+        box.ontouchmove = function(event) {
 
+            console.log("移动",event);
 
+        }
 
+        box.ontouchend = function() {
 
+            console.log("离开");
 
+        }
 
+     </script>
 
+</body>
 
+</html>

+ 102 - 0
移动端/9.点透事件.html
查看文件 

@@ -0,0 +1,102 @@
 
+<!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>
 
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+        /* 触摸行为 */
 
+        touch-action: none;
 
+      }
 
+      #container {
 
+        width: 100%;
 
+        position: relative;
 
+      }
 
+      #under {
 
+        width: 90%;
 
+        height: 500px;
 
+        font-size: 24px;
 
+        text-align: center;
 
+        line-height: 500px;
 
+        background: #eee;
 
+        margin: 25px auto;
 
+      }
 
+      #dialog {
 
+        width: 80%;
 
+        height: 300px;
 
+        background: #fff;
 
+        position: absolute;
 
+        top: 120px;
 
+        left: 38px;
 
+        z-index: 99;
 
+      }
 
+      #title {
 
+        width: 100%;
 
+        height: 200px;
 
+        text-align: center;
 
+        line-height: 200px;
 
+      }
 
+      #action {
 
+        position: absolute;
 
+        top: 200px;
 
+        left: 100px;
 
+      }
 
+      #close {
 
+        width: 100px;
 
+        height: 35px;
 
+        text-align: center;
 
+        line-height: 35px;
 
+        color: #fff;
 
+        background: #00f;
 
+      }
 
+      #mask {
 
+        width: 100%;
 
+        background: rgba(0, 0, 0, .5);
 
+        position: fixed;
 
+        top: 0;
 
+        left: 0;
 
+        right: 0;
 
+        bottom: 0;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div id="container">
 
+      <div id="under">底层元素</div>
 
+      <div id="dialog">
 
+        <div id="title">弹出层</div>
 
+        <div id="action">
 
+          <div id="close">关闭</div>
 
+        </div>
 
+      </div>
 
+      <div id="mask"></div>
 
+    </div>
 
+    <script>
 
+        var close = document.getElementById("close");
 
+        var under = document.getElementById("under");
 
+        /**
 
+         * 点透事件
 
+         * 1.两层元素叠加到一起
 
+         * 2.第一层是touch事件
 
+         * 3.第二层是click事件或者a标签
 
+         * 
+         * 
+         * 解决方案：
 
+         * 1.event.preventDefault()
 
+         * 2.将click事件全部换成touch
 
+         * */
 
+        close.ontouchstart = function(event) {
 
+            // event.preventDefault();
 
+            document.getElementById("dialog").style.display = 'none';
 
+            document.getElementById("mask").style.display = 'none';
 
+        }
 
+        // touchstart => touchmove => touchend
 
+        under.onclick = function() {
 
+            alert("弹出");
 
+        }
 
+    </script>
 
+  </body>
 
+</html>