移动Web——quick_click

来源：互联网发布：顶固衣柜怎么样知乎编辑：程序博客网时间：2024/04/29 15:11
Code:
<!DOCTYPE html><html><head>    <meta charset="UTF-8"/>    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>    <title>click vs touch</title>    <style type="text/css">        div {            font-size: 18px;            font-family: sans-serif;            line-height: 150%;        }        #c {            margin-top: 40px;            height: 60px;            line-height: 60px;            vertical-align: middle;            text-align: center;            background-color: lightgray;            -webkit-user-select:none;        }        #c.click {            background-color: yellow;        }        #t {            margin-top: 20px;            margin-bottom: 40px;            height: 60px;            line-height: 60px;            vertical-align: middle;            text-align: center;            background-color: lightgray;            -webkit-user-select:none;        }        #t.start {            background-color: yellow;        }        #t.move {            background-color: blue;            color: white;        }    </style>    <script type="text/javascript">var click = 0;var flag = 0;        var MOVE_THRESHOLD = 10;        function pageOnLoad() {            var c = document.getElementById("c");            var t = document.getElementById("t");            c.addEventListener("click", function(e){                c.setAttribute("class", "click");            });            t.addEventListener("touchstart", function(e) {                t.setAttribute("class", "start");                t.textContent = "touchstart";                t.setAttribute("data-moved", "n");                t.setAttribute("data-startx", e.touches[0].clientX);                t.setAttribute("data-starty", e.touches[0].clientY);            });            t.addEventListener("touchmove", function(e){                t.setAttribute("class", "move");                                var startx = parseInt(t.getAttribute("data-startx", 10));                var starty = parseInt(t.getAttribute("data-starty", 10));                var deltax = e.touches[0].clientX - startx;                var deltay = e.touches[0].clientY - starty;                if (Math.abs(deltax) > MOVE_THRESHOLD                     || Math.abs(deltay) > MOVE_THRESHOLD) {                    t.setAttribute("data-moved", "y");                }             });            t.addEventListener("touchend", function(e){                t.setAttribute("class", "");                t.textContent = "touchend with moved = " + t.getAttribute("data-moved");            });        }    </script></head><body onload="pageOnLoad();"><div>让我们愉快地开始</div><div id="c">Click</div><div id="t">Touch</div><div></div></body></html>
0 0