移動端學習筆記
click事件延遲300ms 來判斷單擊還是雙擊
touchstart和touchend的位置相同,時間間隔較短沒有觸發touchmove事件,則可認爲觸發了手持設備上的click事件,一般稱它爲tap (如zepto庫)
tap事件比click事件更快
BUG:1.tap點透bug//若點擊上面一層消失,因爲上面一層消失,300ms後下面的元素接受了事件
解決方案:1.加入緩動動畫,上面一層在300ms後消失2.加入中間層來接受事件3.都用tap事件(但原生標籤的click事件不可避免)
2.Android只會觸發一次touchstart,一次touchmove,不觸發touchend
解決方案:touchmove中加入event.preventDefault(),但會導致默認行爲不觸發,如scroll,頁面不滾動
touch是移動交互的核心
局部滾動開啓彈性滾動(局部滾動沒有彈性滾動,滾動多少是多少)//Android不支持
body{
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
touchstart和touchend的位置相同,時間間隔較短沒有觸發touchmove事件,則可認爲觸發了手持設備上的click事件,一般稱它爲tap (如zepto庫)
tap事件比click事件更快
BUG:1.tap點透bug//若點擊上面一層消失,因爲上面一層消失,300ms後下面的元素接受了事件
解決方案:1.加入緩動動畫,上面一層在300ms後消失2.加入中間層來接受事件3.都用tap事件(但原生標籤的click事件不可避免)
2.Android只會觸發一次touchstart,一次touchmove,不觸發touchend
解決方案:touchmove中加入event.preventDefault(),但會導致默認行爲不觸發,如scroll,頁面不滾動
touch是移動交互的核心
局部滾動開啓彈性滾動(局部滾動沒有彈性滾動,滾動多少是多少)//Android不支持
body{
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
中國卓越技術團隊訪談錄(2021年第六季)
InfoQ 中文站
2021-12-15 08:03:56
Alexa 全球排名網站將關閉,排名曾引爭議
辛晓亮
2021-12-14 14:53:55
跨平臺開發框架Compose Multiplatform 1.0發佈
罗燕珊
2021-12-03 18:23:52
華爲雲聯創營元宇宙高峯論壇—技術與文明·探索元宇宙背後的關鍵技術
InfoQ 中文站
2021-12-02 10:18:53
2021 最佳開源軟件榜單出爐,Flutter、StreamNative 上榜
辛晓亮
2021-12-01 11:18:54
Twitter CEO 離職搞比特幣?CTO 成繼任者
闫园园
2021-12-01 10:03:50
塗鴉智能想要打造的IoT開發者生態是什麼樣的?
罗燕珊
2021-11-30 15:23:58
蘋果宣佈自助維修計劃,消費者可以買原裝工具修iPhone
罗燕珊
2021-11-18 14:23:55
花7.5億都做不好的項目,被三位程序員爸爸重寫並開源了
Tina
2021-11-11 09:23:48
架構視角解讀網絡加速 :基於公有云的方案已經過時了?
王一鹏
2021-11-02 13:53:56
基於開源鴻蒙 OpenHarmony,Eclipse基金會公佈新操作系統項目 Oniro
罗燕珊
2021-10-29 12:18:54
OPPO發力健康領域,並推出相應的開發工具套件
罗燕珊
2021-10-27 16:48:52
爲什麼Safari瀏覽器這麼不受Web開發者待見?
Scott Gilbertson
2021-10-25 15:08:55
24小時熱門文章
-
再談23種設計模式(3):行爲型模式(學習筆記)
-
Power Automate Desktop 安裝完,登錄後老是提示one driver 錯誤
-
微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索
-
微前端學習筆記(1):微前端總體架構概述,從微服務發微
-
985 碩士程序員,空窗 4 個月沒有 Offer!
-
一文搞懂 Spring 循環依賴
-
賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。
-
VScode右鍵打開(添加到右鍵)
-
記一次 .NET某工控視覺自動化系統 卡死分析
-
WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發