2022年12月26日 星期一

JavaScript: Touch 和 Mouse 事件的觸發順序

2022年12月26日 星期一

以前 LimeJS framework 寫的 程式中遇過設了 click 事件的處理程序,在 iOS 中沒有執行的情形,當時也沒去深入研究,索性就避免使用 click,改以 touchstart 和 mousedown 來取代。這兩天為了解決「HTML5 分數小教具」在行動裝置上會滑動的問題,監控了最底層元件的 touchstart、touchmove,哈!在 iOS 中的分數小教具,所有的按鈕通通失效了,想想,多半是因為 click 的動作中有含 touchstart 的部份,而它被底層元件攔劫走了,就無法進行後續的程序了。

底下就來測試一下,touchstart、touchend、mousedown、mouseup 和 click 到底依什麼順序來被觸發?

在電腦或是有觸控螢幕的載具中按一下底下虛線方塊中的任何一點,看前面幾個事件出現的順序如何?


值得再進一步觀察的是,在電腦版跟手機版的結果其實是不同的,可以比較看看。

此外,如果在 touchstart 觸發時,加入「preventDefault()」,改變了原有觸發的程序,上面的結果又會有所不同。(註:如果操作的裝置沒有觸控的功能,底下可能會跟前一個實驗結果一樣。)


經過前面的實驗,可以知道,在行動裝置中,因為有觸控功能,是以 TouchEvent 為主,在電腦中則是 TouchEvent 和 MouseEvent 各自獨立運作;在行動裝置中,如果在第一個會觸發的 touchstart 中,呼叫了 event.preventDefault(),mousedown 及 click 就都不會再繼續觸發了,反之則會按順序觸發。

在 LimeJS framework 中,最底層的 director ,為了防止在行動裝置中針對其上的物件操作時,會讓整個畫面滑動,所以監控了 TouchEvent,同時也在 touchstart、touchmove 事件中,執行了 event.preventDefault(),所以如果沒有對應的事件處理程序,搶在 director 前處理,就會造成 click 事件失效。

相關連結

沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket