JavaScript中鼠標事件觸發順序探索

這次是爲了完成之前腦袋裏比較模糊的一個疑問。大家都知道,關於鼠標的事件有非常多,如PC模式下的click、mousedown、mouseup,手機模式下的touchstart、touchend、touchmove。那麼如果將他們全部綁定之後,在PC端和移動端分別做一些鼠標的常用操作,事件觸發的情況會是如何呢。

畢竟實踐出真知,所以今天我就實驗了一下。

首先打開了百度,然後f12,切換到手機模式,在console控制檯中,爲body標籤綁定上之前提到的所有事件,代碼如下:


接下來,我們就可以正式開始實驗了:


一、移動端模式下:

(1)快速點擊一次


可見移動端單擊會先觸發touchstart事件,並在touchend前成功觸發點擊事件。


(2)長按再鬆開(不移動)


可見移動端中,如果長按再鬆開,將不再觸發click事件,而變成mousedown事件。


(3)按住拖動再鬆開


不再觸發click和mousedown,轉而變成touchmove



二、PC模式下(切換回pc模式實驗)

經過測試,在PC模式下做以上的三種操作,觸發效果一致,如下:


總結:經過上邊的測試,我們可以發現一些規律。

1.PC模式下,無論如何都不會觸發與touch相關的事件。

2.click事件,在pc模式下是在鼠標down再up之後纔算觸發,而移動模式下則在touch的start之後,end之前觸發。

3.移動模式下長按不會觸發click事件,如果不移動,則會在touchstart之後不久觸發mousedown事件,如果移動則觸發mousemove事件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章