標籤：ntb java div2 移動 span javascrip 使用 new 滑動方向
注意:無法使用touchend來擷取clientX，touchend是在使用者滑動結束之後才回調
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #touchDiv,#touchDiv2{ height: 500px; width: 500px; background-color: red; } #touchDiv2{ background-color: blue; } </style></head><body> <div id="touchDiv"></div> <div id="touchDiv2"></div> <script type="text/javascript"> function TouchObj(touchEle, offset,prev,next) { this.touchEle = touchEle; this.startX; this.endX; this.prev=prev; this.next=next; this.offset = offset; this.init(this); } TouchObj.prototype.init = function(this_) { this.touchEle.addEventListener(‘touchstart‘,function(e){ this_.startX=e.touches[0].clientX; }); this.touchEle.addEventListener(‘touchmove‘,function(e){ this_.endX=e.touches[0].clientX; }); this.touchEle.addEventListener(‘touchend‘,function(e){ distance=Math.abs(this_.startX-this_.endX); if(distance>this_.offset){ this_.startX>this_.endX?eval(this_.next):eval(this_.prev); } }); }; window.onload=function(){ var touchTest2 = new TouchObj(document.getElementById(‘touchDiv‘),50,"console.log(‘prev‘)","console.log(‘next‘)"), touchTest3 = new TouchObj(document.getElementById(‘touchDiv2‘),50,"console.log(‘prev1‘)","console.log(‘next2‘)"); }; </script></body></html>
移動端擷取使用者在螢幕滑動方向（javascript）混合模式封裝
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
