通過一個(gè)懸浮球交互功能的案例來(lái)闡述問題，以及解決辦法。

實(shí)現(xiàn)效果

類似微信里的懸浮窗效果，蘋果手機(jī)的懸浮球功能效果

• 可以點(diǎn)擊拖動(dòng)，然后吸附在窗口邊緣
• 點(diǎn)擊懸浮球，可以跳轉(zhuǎn)界面，或者更改懸浮球的形態(tài)

準(zhǔn)備

• 移動(dòng)端使用 touch事件類型：

touchstart當(dāng)用戶在觸摸平面上放置了一個(gè)觸點(diǎn)時(shí)觸發(fā) （手指放到屏幕上）

touchmove當(dāng)用戶在觸摸平面上移動(dòng)觸點(diǎn)時(shí)觸發(fā) （手指在屏幕上滑動(dòng)）

touchend當(dāng)一個(gè)觸點(diǎn)被用戶從觸摸平面上移除（抬起手指）

touchcancel終止觸摸事件

多點(diǎn)觸控

• TouchEvent.targetTouches 只讀

一個(gè) TouchList 對(duì)象，是包含了如下觸點(diǎn)的 Touch 對(duì)象：觸摸起始于當(dāng)前事件的目標(biāo) element 上，并且仍然沒有離開觸摸平面的觸點(diǎn)。

視口處于第四象限，原點(diǎn)在左上角

event.targetTouches.clientX // 觸摸元素橫坐標(biāo)
event.targetTouches.clientY // 觸摸元素縱坐標(biāo)

• TouchEvent.touches 只讀

一個(gè) TouchList 對(duì)象，包含了所有當(dāng)前接觸觸摸平面的觸點(diǎn)的 Touch 對(duì)象，無(wú)論它們的起始于哪個(gè) element 上，也無(wú)論它們狀態(tài)是否發(fā)生了變化。

實(shí)現(xiàn)

通過設(shè)置懸浮球定位樣式，拖動(dòng)的時(shí)候計(jì)算坐標(biāo)，然后動(dòng)態(tài)的修改懸浮球的定位偏移量，結(jié)合transtion過渡效果，實(shí)現(xiàn)平滑的過渡

代碼比較簡(jiǎn)單，就不貼了。

問題

當(dāng)給元素添加了touch事件之后，click事件就不會(huì)出發(fā)了，那么怎么模擬點(diǎn)擊效果呢？

分析

在不了解觸摸事件響應(yīng)機(jī)制的時(shí)候，你可能會(huì)從計(jì)算觸摸目標(biāo)元素的時(shí)長(zhǎng)或者計(jì)算觸摸起始位置來(lái)判定點(diǎn)擊行為，但是這兩種方式都不是最佳的，原因有以下幾點(diǎn)：

• 計(jì)算觸摸時(shí)長(zhǎng)比較麻煩
• 判斷移動(dòng)距離不嚴(yán)謹(jǐn)，有可能拖動(dòng)了一圈又回到初始位置
• 結(jié)合計(jì)算觸摸時(shí)長(zhǎng)和觸摸元素起始位置兩種方式，邏輯比較復(fù)雜

下面看我是怎么做的：

首先應(yīng)該了解觸摸行為的事件響應(yīng)機(jī)制：

• 如果有拖動(dòng)行為，事件執(zhí)行次序?yàn)椋?code>touchstart-> touchmove-> touchend
• 沒有拖動(dòng)行為，事件執(zhí)行次序?yàn)椋?code>touchstart-> touchend

從上面的分析來(lái)看，我們可以從touchmove 入手，繼續(xù)往下看??

解決

• 在touchmove事件中增加一個(gè)是否移動(dòng)過的標(biāo)記isMoved: true
• 在touchend事件中判斷isMoved是否為true，是true則按原有邏輯執(zhí)行，是false則說明沒有移動(dòng)過，屬于點(diǎn)擊行為
• 在touchend事件最后，重置isMoved為初始值false，這樣每一個(gè)觸摸操作都可以進(jìn)入同樣的邏輯，不用擔(dān)心狀態(tài)混亂

完美解決模擬點(diǎn)擊行為????

以上就是移動(dòng)端touch拖動(dòng)和click事件沖突問題解決的詳細(xì)內(nèi)容，更多關(guān)于touch click事件沖突解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論