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

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.4.1版本、Dell G3電腦。

jquery有touch功能嗎

Touch 事件在用戶觸摸屏幕（頁面）時觸發(fā)。

• tap 事件在用戶敲擊某個元素時觸發(fā)。

• taphold 事件在用戶敲擊某個元素并保持一秒時被觸發(fā)

• swipe 事件在用戶在某個元素上水平滑動超過 30px 時被觸發(fā)：

• swipeleft 事件在用戶在某個元素上從左滑動超過 30px 時被觸發(fā)：

• swiperight 事件在用戶在某個元素上從右滑動超過 30px 時被觸發(fā)：

簡單解釋：

tap(輕擊)：一次快速完整的輕擊后觸發(fā)

taphold（輕擊不放）：輕擊并不放（大約一秒）后觸發(fā)

swipe(滑動)：一秒內(nèi)水平拖拽大于30PX，或者縱向拖曳小于20px的事件發(fā)生時觸發(fā)的事件。多長時間拖拽多少px可以設(shè)置的。這個事件有其相關(guān)聯(lián)的屬性，分別為

• scrollSupressionThreshold (默認(rèn): 10px) – 水平方向拖拽大于這個值，將不觸發(fā)。

• durationThreshold (默認(rèn): 1000ms) – 滑動時間超過這個數(shù)值就不會產(chǎn)生滑動事件。

• horizontalDistanceThreshold (默認(rèn): 30px) – 水平劃動距離超過這個數(shù)值才會產(chǎn)生滑動事件。

• verticalDistanceThreshold (默認(rèn): 75px) – 豎直劃動距離小于這個數(shù)值才會產(chǎn)生滑動事件。

swipeleft（左劃）：劃動事件為向左的方向時觸發(fā)

swiperight（右劃）：劃動事件為向右的方向時觸發(fā)

示例如下：

tap(輕擊)：一次快速完整的輕擊后觸發(fā)

$(function(){       $("#home").live('tap', function() {         $('#toPage2').click(); // 為首頁綁定點(diǎn)擊事件       });       $("#page-2").live('tap', function() {         $('#toHome').click(); // 為另一頁面綁定點(diǎn)擊事件       });     });

taphold（輕擊不放）：輕擊并不放（大約一秒）后觸發(fā)

$(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視頻教程