資訊專欄INFORMATION COLUMN
摘要：而當(dāng)滑動(dòng)角度在其他區(qū)域的時(shí)候就默認(rèn)是左右滑動(dòng)，這個(gè)時(shí)候就要阻止瀏覽器的默認(rèn)事件。這樣處理用戶的體驗(yàn)會(huì)好很多。當(dāng)然那個(gè)的比例也可以自行調(diào)整，我這里就以角度為界限。
在用圖表插件的時(shí)候默認(rèn)圖表區(qū)域可以正常左右滑動(dòng)，但是測(cè)試的時(shí)候發(fā)現(xiàn)在有些安卓機(jī)型上滑動(dòng)不是特別流暢，經(jīng)過一系列排查發(fā)現(xiàn)是默認(rèn)的滾動(dòng)事件影響到了，于是在touch事件里面阻止了瀏覽器默認(rèn)事件：
e.preventDefault();
但是新的問題又產(chǎn)生了，阻止了默認(rèn)事件后，沒法在圖表區(qū)域上下滑動(dòng)來(lái)滾動(dòng)頁(yè)面，在對(duì)于小屏幕的用戶體驗(yàn)非常差，可能圖表區(qū)域就占了3/2屏幕，就根本沒法進(jìn)行頁(yè)面的滾動(dòng)。于是乎找了新的方法，先上最后解決這個(gè)bug的代碼：
$("#selector").bind("touchstart",function(e){
var point = e.touches ? e.touches[0] : e;
$("#selector").attr("pointX", point.pageX);
$("#selector").attr("pointY", point.pageY);
});
$("#selector").bind("touchmove",function(e){
var point= e.touches ? e.touches[0] : e;
var deltaX= point.pageX -$("#selector").attr("pointX");
var deltaY= point.pageY -$("#selector").attr("pointY");
if( deltaY && Math.abs(deltaY / deltaX) > 1.5){
return;
}
else{
event.preventDefault();
}
});
代碼的原理就是在點(diǎn)擊的時(shí)候通過pageX和pageY屬性來(lái)獲取點(diǎn)擊位置的x,y軸坐標(biāo)，當(dāng)滑動(dòng)的時(shí)候再次獲取x,y軸坐標(biāo)，通過將deltaY / deltaX得到的值與界限值1.5進(jìn)行對(duì)比，如圖：
當(dāng)起始點(diǎn)為（0，0），滑動(dòng)的角度在藍(lán)色陰影區(qū)域的時(shí)候就默認(rèn)是上下滑動(dòng)，這個(gè)時(shí)候就不做處理，觸發(fā)默認(rèn)的瀏覽器事件。而當(dāng)滑動(dòng)角度在其他區(qū)域的時(shí)候就默認(rèn)是左右滑動(dòng)，這個(gè)時(shí)候就要阻止瀏覽器的默認(rèn)事件。這樣處理用戶的體驗(yàn)會(huì)好很多。
當(dāng)然那個(gè)1.5的比例也可以自行調(diào)整，我這里就以tan3/2角度為界限。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90265.html
摘要：那么既然有添加事件，就有移除事件，使用方式與添加事件幾乎完全一樣事件類型事件執(zhí)行函數(shù)可選，為布爾值表示在冒泡捕獲階段執(zhí)行唯一需要注意的是即移除事件的函數(shù)，這里只能寫函數(shù)名，而不能像添加事件一樣將整個(gè)功能函數(shù)全部寫入。 用戶交互也許是我們學(xué)習(xí)canvas動(dòng)畫中首先需要掌握的部分。畢竟，如果沒有交互或者向動(dòng)畫中做一些動(dòng)態(tài)的輸入，那么這跟看電影有什么區(qū)別呢？用戶交互基于事件，一般來(lái)說(shuō)包括：鼠...
摘要：那么既然有添加事件，就有移除事件，使用方式與添加事件幾乎完全一樣事件類型事件執(zhí)行函數(shù)可選，為布爾值表示在冒泡捕獲階段執(zhí)行唯一需要注意的是即移除事件的函數(shù)，這里只能寫函數(shù)名，而不能像添加事件一樣將整個(gè)功能函數(shù)全部寫入。 用戶交互也許是我們學(xué)習(xí)canvas動(dòng)畫中首先需要掌握的部分。畢竟，如果沒有交互或者向動(dòng)畫中做一些動(dòng)態(tài)的輸入，那么這跟看電影有什么區(qū)別呢？用戶交互基于事件，一般來(lái)說(shuō)包括：鼠...
摘要：早期版本的的就是如此處理的，自定義事件在中觸發(fā)，解決單擊延時(shí)的問題。給按鈕綁定事件事件執(zhí)行自定義事件觸發(fā)上的事件當(dāng)然實(shí)際中肯定要放在其他的事件回調(diào)中，不然沒辦法響應(yīng)用戶操作。 click延時(shí) 在移動(dòng)設(shè)備上按下手指單擊，按先后順序，依次會(huì)發(fā)生touchstart->-touchmove（如果有的話）>touchend->mousedown->mousemove（如果有的話）->mouse...
閱讀 3358·2021-11-23 09:51
閱讀 1142·2021-09-03 10:30
閱讀 3275·2021-08-31 09:40
閱讀 3336·2019-08-30 14:22
閱讀 980·2019-08-30 14:09
閱讀 2966·2019-08-30 13:21
閱讀 3327·2019-08-28 18:03
閱讀 2916·2019-08-26 13:44
