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

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

jquery有touch功能嗎

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

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

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

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

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

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

簡(jiǎn)單解釋：

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

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

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

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

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

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

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

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

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

示例如下：

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

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

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

$(function(){       $("#home").live('taphole', function() {         $('#toPage2').click(); // 為首頁(yè)綁定長(zhǎng)按事件       });       $("#page-2").live('taphole', function() {         $('#toHome').click(); // 為另一頁(yè)面綁定長(zhǎng)按事件       });     });

swipe(滑動(dòng)) ： 隨便左右滑動(dòng)

$(function(){       $("#home").live('swipe', function() {         $('#toPage2').click(); // 為首頁(yè)綁定滑動(dòng)事件       });       $("#page-2").live('swipe', function() {         $('#toHome').click(); // 為另一頁(yè)面綁定滑動(dòng)事件       });     });

視頻教程推薦：jQuery視頻教程