jquery中有touch功能;touch功能會在用戶在觸碰頁面時觸發:1、tap事件在用戶敲擊某個元素時觸發;2、taphold事件在用戶敲擊某個元素并保持一秒時觸發;3、swipe事件在用戶在某個元素上水平滑動超過30px時觸發;4、swipeleft事件在用戶在某個元素上從左滑動超過30px時觸發;5、swiperight事件在用戶在某個元素上從右滑動超過30px時觸發。

本教程操作環境:windows10系統、jquery3.4.1版本、Dell G3電腦。
jquery有touch功能嗎
Touch 事件在用戶觸摸屏幕(頁面)時觸發。
-
tap 事件在用戶敲擊某個元素時觸發。
-
taphold 事件在用戶敲擊某個元素并保持一秒時被觸發
-
swipe 事件在用戶在某個元素上水平滑動超過 30px 時被觸發:
-
swipeleft 事件在用戶在某個元素上從左滑動超過 30px 時被觸發:
-
swiperight 事件在用戶在某個元素上從右滑動超過 30px 時被觸發:
簡單解釋:
tap(輕擊):一次快速完整的輕擊后觸發
taphold(輕擊不放):輕擊并不放(大約一秒)后觸發
swipe(滑動):一秒內水平拖拽大于30PX,或者縱向拖曳小于20px的事件發生時觸發的事件。多長時間拖拽多少px可以設置的。這個事件有其相關聯的屬性,分別為
-
scrollSupressionThreshold (默認: 10px) – 水平方向拖拽大于這個值,將不觸發。
-
durationThreshold (默認: 1000ms) – 滑動時間超過這個數值就不會產生滑動事件。
-
horizontalDistanceThreshold (默認: 30px) – 水平劃動距離超過這個數值才會產生滑動事件。
-
verticalDistanceThreshold (默認: 75px) – 豎直劃動距離小于這個數值才會產生滑動事件。
swipeleft(左劃):劃動事件為向左的方向時觸發
swiperight(右劃):劃動事件為向右的方向時觸發
示例如下:
tap(輕擊):一次快速完整的輕擊后觸發
$(function(){ $("#home").live('tap', function() { $('#toPage2').click(); // 為首頁綁定點擊事件 }); $("#page-2").live('tap', function() { $('#toHome').click(); // 為另一頁面綁定點擊事件 }); });
taphold(輕擊不放):輕擊并不放(大約一秒)后觸發
$(function(){ $("#home").live('taphole', function() { $('#toPage2').click(); // 為首頁綁定長按事件 }); $("#page-2").live('taphole', function() { $('#toHome').click(); // 為另一頁面綁定長按事件 }); });
swipe(滑動) : 隨便左右滑動
$(function(){ $("#home").live('swipe', function() { $('#toPage2').click(); // 為首頁綁定滑動事件 }); $("#page-2").live('swipe', function() { $('#toHome').click(); // 為另一頁面綁定滑動事件 }); });
視頻教程推薦:jQuery視頻教程
站長資訊網