<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>Document</title>? ? <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">? ? <style>? ? ? ? *{? ? ? ? ? ? margin:0;? ? ? ? ? ? padding: 0;? ? ? ? }? ? ? ? .wrapper{? ? ? ? ? ? overflow:hidden;? ? ? ? }? ? ? ? .swipArea{? ? ? ? ? ? height: 100px;? ? ? ? ? ? background-color: green;? ? ? ? ? ? text-align: center;? ? ? ? ? ? line-height: 100px;? ? ? ? ? ? position: absolute;? ? ? ? ? ? left: 0;? ? ? ? ? ? right: 0;? ? ? ? }? ? </style></head><body>? ? <div>? ? ? ? <div id="swipArea">swipArea</div>? ? </div>? ? <script>? ? ? ? function Swip(el){? ? ? ? ? ? this.el = el;? ? ? ? ? ? this.init();? ? ? ? }? ? ? ? Swip.prototype.init = function(){? ? ? ? ? ? var startTouchX = 0,? ? ? ? ? ? ? ? startTouchY = 0,? ? ? ? ? ? ? ? endTouchX = 0,? ? ? ? ? ? ? ? endTouchY = 0;? ? ? ? ? ? var deltaX = 0, deltaY = 0; ?? ? ? ? ? ? var direction = "left";? ? ? ? ? ? var d = "";? ? ? ? ? ? var that = this;? ? ? ? ? ? this.el.addEventListener("touchstart",function(evt){? ? ? ? ? ? ? ? evt.preventDefault();? ? ? ? ? ? ? ? var touches = evt.touches[0];? ? ? ? ? ? ? ? startTouchX = touches.pageX;? ? ? ? ? ? ? ? startTouchY = touches.pageY;? ? ? ? ? ? ? ? // console.log("startTouchX : " + startTouchX)? ? ? ? ? ? },false);? ? ? ? ? ? document.addEventListener("touchmove",function(evt){? ? ? ? ? ? ? ? evt.preventDefault();? ? ? ? ? ? ? ? var touches = evt.touches[0];? ? ? ? ? ? ? ? endTouchX = touches.pageX;? ? ? ? ? ? ? ? endTouchY = touches.pageY;? ? ? ? ? ? ? ? deltaY = endTouchY - startTouchY;? ? ? ? ? ? ? ? if(deltaY > 0) that.el.style.top = deltaY + "px";?? ? ? ? ? ? ? ? // console.log("endTouchX : " + endTouchX + ",endTouchY : " + endTouchY)? ? ? ? ? ? },false);? ? ? ? ? ? document.addEventListener("touchend",function(evt){? ? ? ? ? ? ? ? evt.preventDefault();? ? ? ? ? ? ? ? document.ontouchmove = null;? ? ? ? ? ? ? ? document.ontouchstart = null;? ? ? ? ? ? ? ? deltaX = endTouchX - startTouchX;? ? ? ? ? ? ? ? deltaY = endTouchY - startTouchY;? ? ? ? ? ? ? ? d = ?Math.abs(deltaX) > Math.abs(deltaY) ? "h" : "v";? ? ? ? ? ? ? ? if(d == "h") direction = deltaX > 0 ? "right" : "left";? ? ? ? ? ? ? ? else if(d == "v") ?direction = deltaY > 0 ? "down" : "top";? ? ? ? ? ? ? ? that.el.style.top = "0";? ? ? ? ? ? ? ? // console.log("deltaX : " + deltaX + ",deltaY : " + deltaY) ?;? ? ? ? ? ? },false);? ? ? ? }? ? ? ? var swipArea = document.querySelector("#swipArea");? ? ? ? new Swip(swipArea);? ? </script></body></html>
為啥document觸發房子touchstart外，下次點擊觸發start，顯示startTouchX 次數加1
我是蝸牛
2016-10-26 14:45:13
