mousedown、mouseup、click事件之間的關(guān)系

可能平常用的比較多的點(diǎn)擊事件都是click事件,今天看別人寫的代碼,發(fā)現(xiàn)綁定的是mousedown,mousemove,按表面意思來看,mousedown和click似乎都是表示"點(diǎn)擊",但了解后才發(fā)現(xiàn),他們具體表示的“點(diǎn)擊”動作是不同的。

mousedown

當(dāng)鼠標(biāo)指針移動到元素上方,并按下鼠標(biāo)按鍵(左、右鍵均可)時,會發(fā)生 mousedown 事件。
與 click 事件不同,mousedown 事件僅需要按鍵被按下,而不需要松開即可發(fā)生。

mouseup

當(dāng)在元素上松開鼠標(biāo)按鍵(左、右鍵均可)時,會發(fā)生 mouseup 事件。
與 click 事件不同,mouseup 事件僅需要松開按鈕。當(dāng)鼠標(biāo)指針位于元素上方時,放松鼠標(biāo)按鈕就會觸發(fā)該事件。

click

當(dāng)鼠標(biāo)指針停留在元素上方,然后按下并松開鼠標(biāo)左鍵時,就會發(fā)生一次 click 事件。
注意:觸發(fā)click事件的條件是按下并松開鼠標(biāo)左鍵!按下并松開鼠標(biāo)右鍵并不會觸發(fā)click事件。

三個事件的觸發(fā)順序

若在同一個元素上按下并松開鼠標(biāo)左鍵,會依次觸發(fā)mousedown、mouseup、click,前一個事件執(zhí)行完畢才會執(zhí)行下一個事件
若在同一個元素上按下并松開鼠標(biāo)右鍵,會依次觸發(fā)mousedown、mouseup,前一個事件執(zhí)行完畢才會執(zhí)行下一個事件,不會觸發(fā)click事件

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

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

  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,715評論 1 11
  • 本節(jié)介紹各種常見的瀏覽器事件。 鼠標(biāo)事件 鼠標(biāo)事件指與鼠標(biāo)相關(guān)的事件,主要有以下一些。 click 事件,dblc...
    許先生__閱讀 2,849評論 0 4
  • 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,722評論 2 10
  • 本篇博客源地址 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件ele.click()ele.click(ha...
    ZombieBrandg閱讀 753評論 0 1
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,519評論 0 8

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