移动端获取用户在屏幕滑动方向（javascript）混合模式封装
Posted mingmliang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端获取用户在屏幕滑动方向（javascript）混合模式封装相关的知识，希望对你有一定的参考价值。
注意:无法使用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）混合模式封装的主要内容，如果未能解决你的问题，请参考以下文章