jquery有touch功能嗎

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) – 滑動時間超過這個數值就不會產生滑動事件。

• horizo​​ntalDistanceThreshold (預設: 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影片教學

以上是jquery有touch功能嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！