JS手機端touch事件計算滑動距離的方法示例
更新時間:2017年10月26日 12:07:22 作者:juzipchy
這篇文章主要介紹了JS手機端touch事件計算滑動距離的方法,結合實例形式分析了javascript響應手機端屏幕上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程序設計有所幫助。
相關文章
基于JavaScript實現(xiàn)移除(刪除)數(shù)組中指定元素
在Array對象中有給定的函數(shù)可以刪除數(shù)組中指定的元素,雖然非常好用,但是總感覺看不到摸不著的比較別扭,下面就分享一個自定義的刪除數(shù)組指定索引值元素的函數(shù),希望給大家一個全新的思路2016-01-01
關閉瀏覽器輸入框自動補齊 兼容IE,FF,Chrome等主流瀏覽器
這篇文章主要介紹了關閉瀏覽器輸入框自動補齊 兼容IE,FF,Chrome等主流瀏覽器,需要的朋友可以參考下。希望對大家有所幫助2014-02-02

