通過一個(gè)懸浮球交互功能的案例來闡述問題,以及解決辦法 。實(shí)現(xiàn)效果類似微信里的懸浮窗效果,蘋果手機(jī)的懸浮球功能效果
- 可以點(diǎn)擊拖動(dòng),然后吸附在窗口邊緣
- 點(diǎn)擊懸浮球,可以跳轉(zhuǎn)界面,或者更改懸浮球的形態(tài)
- 移動(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只讀
TouchList 對象,是包含了如下觸點(diǎn)的 Touch 對象:觸摸起始于當(dāng)前事件的目標(biāo) element 上,并且仍然沒有離開觸摸平面的觸點(diǎn) 。視口處于第四象限,原點(diǎn)在左上角
event.targetTouches.clientX // 觸摸元素橫坐標(biāo)event.targetTouches.clientY // 觸摸元素縱坐標(biāo)TouchEvent.touches只讀
TouchList 對象,包含了所有當(dāng)前接觸觸摸平面的觸點(diǎn)的 Touch 對象,無論它們的起始于哪個(gè) element 上,也無論它們狀態(tài)是否發(fā)生了變化 。實(shí)現(xiàn)通過設(shè)置懸浮球定位樣式,拖動(dòng)的時(shí)候計(jì)算坐標(biāo),然后動(dòng)態(tài)的修改懸浮球的定位偏移量,結(jié)合
transtion過渡效果,實(shí)現(xiàn)平滑的過渡【移動(dòng)端touch拖動(dòng)事件和click事件沖突問題解決】代碼比較簡單,就不貼了 。
問題當(dāng)給元素添加了
touch事件之后,click事件就不會(huì)出發(fā)了,那么怎么模擬點(diǎn)擊效果呢?分析在不了解觸摸事件響應(yīng)機(jī)制的時(shí)候,你可能會(huì)從計(jì)算觸摸目標(biāo)元素的時(shí)長或者計(jì)算觸摸起始位置來判定點(diǎn)擊行為,但是這兩種方式都不是最佳的,原因有以下幾點(diǎn):
- 計(jì)算觸摸時(shí)長比較麻煩
- 判斷移動(dòng)距離不嚴(yán)謹(jǐn),有可能拖動(dòng)了一圈又回到初始位置
- 結(jié)合計(jì)算觸摸時(shí)長和觸摸元素起始位置兩種方式,邏輯比較復(fù)雜
首先應(yīng)該了解觸摸行為的事件響應(yīng)機(jī)制:
- 如果有拖動(dòng)行為,事件執(zhí)行次序?yàn)椋?code>touchstart->
touchmove->touchend
- 沒有拖動(dòng)行為,事件執(zhí)行次序?yàn)椋?code>touchstart->
touchend
解決
- 在
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)cc
熱愛前端,也喜歡專研各種跟本職工作關(guān)系不大的技術(shù),技術(shù)、產(chǎn)品興趣廣泛且濃厚,等待著一個(gè)創(chuàng)業(yè)機(jī)會(huì) 。本號(hào)主要致力于分享個(gè)人經(jīng)驗(yàn)總結(jié),希望可以給一小部分人一些微小幫助 。
希望能和大家一起努力營造一個(gè)良好的學(xué)習(xí)氛圍,為了個(gè)人和家庭、為了我國的互聯(lián)網(wǎng)物聯(lián)網(wǎng)技術(shù)、數(shù)字化轉(zhuǎn)型、數(shù)字經(jīng)濟(jì)發(fā)展做一點(diǎn)點(diǎn)貢獻(xiàn) 。數(shù)風(fēng)流人物還看中國、看今朝、看你我 。
經(jīng)驗(yàn)總結(jié)擴(kuò)展閱讀
- 移動(dòng)光纖寬帶家中小盒叫什么
- 2024年春節(jié)溫度會(huì)創(chuàng)新低嗎 2024年春節(jié)會(huì)出現(xiàn)極端低溫天氣嗎
- 端午節(jié)那一天人們都有哪些活動(dòng)
- 端午節(jié)艾草的意義
- 京劇發(fā)端的標(biāo)志事件是什么
- 2023年10月22日適合移動(dòng)神位嗎 2023年農(nóng)歷九月初八移動(dòng)神位吉日
- 【前端必會(huì)】不知道webpack插件? webpack插件源碼分析BannerPlugin
- 如何查詢流量
- 快手怎樣才能開直播(快手pc端怎么開直播)
- 【前端必會(huì)】tapable、hook,webpack的靈魂
