資訊專欄INFORMATION COLUMN
摘要：而當滑動角度在其他區域的時候就默認是左右滑動，這個時候就要阻止瀏覽器的默認事件。這樣處理用戶的體驗會好很多。當然那個的比例也可以自行調整，我這里就以角度為界限。
在用圖表插件的時候默認圖表區域可以正常左右滑動，但是測試的時候發現在有些安卓機型上滑動不是特別流暢，經過一系列排查發現是默認的滾動事件影響到了，于是在touch事件里面阻止了瀏覽器默認事件：
e.preventDefault();
但是新的問題又產生了，阻止了默認事件后，沒法在圖表區域上下滑動來滾動頁面，在對于小屏幕的用戶體驗非常差，可能圖表區域就占了3/2屏幕，就根本沒法進行頁面的滾動。于是乎找了新的方法，先上最后解決這個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();
}
});
代碼的原理就是在點擊的時候通過pageX和pageY屬性來獲取點擊位置的x,y軸坐標，當滑動的時候再次獲取x,y軸坐標，通過將deltaY / deltaX得到的值與界限值1.5進行對比，如圖：
當起始點為（0，0），滑動的角度在藍色陰影區域的時候就默認是上下滑動，這個時候就不做處理，觸發默認的瀏覽器事件。而當滑動角度在其他區域的時候就默認是左右滑動，這個時候就要阻止瀏覽器的默認事件。這樣處理用戶的體驗會好很多。
當然那個1.5的比例也可以自行調整，我這里就以tan3/2角度為界限。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90265.html
摘要：那么既然有添加事件，就有移除事件，使用方式與添加事件幾乎完全一樣事件類型事件執行函數可選，為布爾值表示在冒泡捕獲階段執行唯一需要注意的是即移除事件的函數，這里只能寫函數名，而不能像添加事件一樣將整個功能函數全部寫入。 用戶交互也許是我們學習canvas動畫中首先需要掌握的部分。畢竟，如果沒有交互或者向動畫中做一些動態的輸入，那么這跟看電影有什么區別呢？用戶交互基于事件，一般來說包括：鼠...
摘要：那么既然有添加事件，就有移除事件，使用方式與添加事件幾乎完全一樣事件類型事件執行函數可選，為布爾值表示在冒泡捕獲階段執行唯一需要注意的是即移除事件的函數，這里只能寫函數名，而不能像添加事件一樣將整個功能函數全部寫入。 用戶交互也許是我們學習canvas動畫中首先需要掌握的部分。畢竟，如果沒有交互或者向動畫中做一些動態的輸入，那么這跟看電影有什么區別呢？用戶交互基于事件，一般來說包括：鼠...
摘要：早期版本的的就是如此處理的，自定義事件在中觸發，解決單擊延時的問題。給按鈕綁定事件事件執行自定義事件觸發上的事件當然實際中肯定要放在其他的事件回調中，不然沒辦法響應用戶操作。 click延時 在移動設備上按下手指單擊，按先后順序，依次會發生touchstart->-touchmove（如果有的話）>touchend->mousedown->mousemove（如果有的話）->mouse...
閱讀 3292·2021-11-23 09:51
閱讀 945·2021-09-03 10:30
閱讀 3218·2021-08-31 09:40
閱讀 3281·2019-08-30 14:22
閱讀 906·2019-08-30 14:09
閱讀 2903·2019-08-30 13:21
閱讀 3239·2019-08-28 18:03
閱讀 2863·2019-08-26 13:44
