移動端touch事件影響界面click/超鏈接事件無法點擊


觸摸事件:

三種在規范中列出並獲得跨移動設備廣泛實現的基本觸摸事件:

1.touchstart:手指放在一個DOM元素上。

2.touchmove:手指拖曳一個DOM元素。

3.touchend:手指從一個DOM元素上移開。

每個觸摸事件都包括了三個觸摸列表:

1.touches:當前位於屏幕上的所有手指的一個列表。

2.targetTouches:位於當前DOM元素上的手指的一個列表。

3.changedTouches:涉及當前事件的手指的一個列表。

例如,在一個touchend事件中,這就會是移開的手指。

這些列表由包含了觸摸信息的對象組成:

1.identifier:一個數值,唯一標識觸摸會話(touchsession)中的當前手指。

2.target:DOM元素,是動作所針對的目標。

3.客戶/頁面/屏幕坐標:動作在屏幕上發生的位置。

4.半徑坐標和rotationAngle:畫出大約相當於手指形狀的橢圓形。

 

這兩天自己在做一個移動端APP,要用到滑動觸發動畫的效果,做完之后發現滑動和動畫可以順利完成,但是頁面其他的超鏈接和click點擊事件卻無法點擊了,用到的庫是zepto和vue。

之后排查發現問題可能是出在event事件中,就把touchstart和touchend事件的默認行為取消了(e.preventDefault()),取消后發現可以點擊了,但是滑動效果大打折扣了,從右邊滑動回左邊的時候效果非常差,然后就上百度查,發現有一篇文章

https://www.cnblogs.com/lvmingyin/p/5372678.html

之后把阻止默認行為添加到touchmove 就OK了。

相關的文章地址: http://caibaojian.com/mobile-touch-event.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM