JS手機端touch事件計算滑動距離的方法示例
本文實例講述了JS手機端touch事件計算滑動距離的方法。分享給大家供大家參考,具體如下:
計算手勢在手機屏幕上滑動時,手勢滑動的距離,代碼如下:
function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(event){ var touch = event.targetTouches[0]; //滑動起點的坐標 startX = touch.pageX; startY = touch.pageY; // console.log("startX:"+startX+","+"startY:"+startY); }); body.bind("touchmove",function(event){ var touch = event.targetTouches[0]; //手勢滑動時,手勢坐標不斷變化,取最后一點的坐標為最終的終點坐標 endX = touch.pageX; endY = touch.pageY; // console.log("endX:"+endX+","+"endY:"+endY); }) body.bind("touchend",function(event){ var distanceX=endX-startX, distanceY=endY - startY; // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY); //移動端設備的屏幕寬度 var clientHeight; =document.documentElement.clientHeight; // console.log(clientHeight;*0.2); //判斷是否滑動了,而不是屏幕上單擊了 if(startY!=Math.abs(distanceY)){ //在滑動的距離超過屏幕高度的20%時,做某種操作 if(Math.abs(distanceY)>clientHeight*0.2){ //向下滑實行函數(shù)someAction1,向上滑實行函數(shù)someAction2 distanceY <0 ? someAction1():someAction2(); } } startX = startY = endX =endY =0; }) }
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《JavaScript事件相關操作與技巧大全》、《JavaScript操作DOM技巧總結》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
修改 bootstrap table 默認detailRow樣式的實例代碼
這篇文章主要介紹了修改 bootstrap table 默認detailRow樣式的實例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-07-07ES6數(shù)組復制和填充方法copyWithin()、fill()的具體使用
本文主要介紹了ES6數(shù)組復制和填充方法copyWithin()、fill()的具體使用,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript實現(xiàn)將Word文檔解析成瀏覽器認識的HTML
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)將Word文檔解析成瀏覽器認識的HTML,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-02-02JS表單驗證插件之數(shù)據(jù)與邏輯分離操作實例分析【策略模式】
這篇文章主要介紹了JS表單驗證插件之數(shù)據(jù)與邏輯分離操作,結合實例形式分析了JavaScript基于策略模式實現(xiàn)數(shù)據(jù)與邏輯分離的表單驗證插件相關原理、操作技巧及注意事項,需要的朋友可以參考下2020-05-05詳解如何讓InstantClick兼容MathJax、百度統(tǒng)計等
本篇文章主要介紹了如何讓InstantClick兼容MathJax、百度統(tǒng)計等,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09