鼠標(biāo)點擊事件流

總結(jié)一下鼠標(biāo)從按下觸發(fā)的事件,和事件的冒泡情況。

事件類型:mousedown(按下),mousemove(移動),mouseup(抬起),click(單擊),dblclick(雙擊),contextmenu(右鍵菜單),mouseover(進入元素),mouseout(離開元素),mouseenter(類似mouseover,但是不冒泡),mouseleave(類似mouseout,但是不冒泡)。

移動端不支持dblclick,因為移動端雙擊頁面是放大效果。單手觸發(fā)的是mosuemove事件。

冒泡情況:除了mouseleave,mouseenter,其他事件都冒泡。

事件順序:

click事件:mousedown-mouseup-cick

右鍵click事件:

safari:mousedown-contextmenu

Firefox:mousedown-contextmenu-mouseup

chrome:mousedown-contextmenu-mouseleave-mouseout

IE:mousemove-mousedown-mouseup-contextmenu-mouseleave

dblclick事件:mousedown-mouseup-click-mousedown-mouseup-click-dblclick

大家可以寫一個小的demo,看一下鼠標(biāo)在父子元素間移入移出的事件順序,這里我只說下,就不貼代碼了。

父元素進入子元素:父元素的mouseout,子元素的mouseenter,子元素的mouseover,父元素的mouseover,子元素的mousemove,父元素的mousemove

可以看出來不觸發(fā)父元素的mouseleave事件。

子元素進入父元素:子元素的mouseleave,子元素的mouseout,父元素的mouseout,父元素的mouseover,父元素的mousemove

可以看出不觸發(fā)父元素的mouseenter事件。

事件對象:

都支持clientX/Y,screenX/Y,pageX/Y,offsetX/Y,但是X/Y,layerX/Y有兼容性問題,目前IE10及其以上和其他瀏覽器都不支持這兩個屬性。

但是IE7-的起點不是(0,0),而是(2,2)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容