您好,登錄后才能下訂單哦!
前言
當實現(xiàn)類似Excel選中區(qū)域的功能時,經(jīng)常出現(xiàn) mouseup 事件丟失的情況,由于缺少了 mouseup 事件,導致一個完整的操作無法進行。
如果你是想進行拖拽移動操作,也可以參考本文。
原因
目前發(fā)現(xiàn)兩個原因:
解決辦法
第一種情況
通過執(zhí)行下面的代碼阻止系統(tǒng)默認的操作來防止觸發(fā) drag 操作:
//在事件中 e=e || window.event; pauseEvent(e); //阻止事件冒泡 //不僅僅要stopPropagation,還要preventDefault function pauseEvent(e){ if(e.stopPropagation) e.stopPropagation(); if(e.preventDefault) e.preventDefault(); e.cancelBubble=true; e.returnValue=false; return false; }
通過對事件調(diào)用pauseEvent方法可以防止出現(xiàn)drag操作,因此在區(qū)域內(nèi)可以避免mouseup丟失。即使你想實現(xiàn)的本來就是 drag 操作,也可以通過創(chuàng)建跟隨鼠標移動的dom元素實現(xiàn)效果。
第二種情況
由于鼠標移到了區(qū)域外,觸發(fā)了 mouseleave 操作,因此在這種情況下要監(jiān)聽 mouseleave 操作,當觸發(fā)該操作時可以停止或者還原狀態(tài)。
特別注意的地方
當處理鼠標事件時,可以還要考慮是否要控制按下那個鍵時才允許操作。
Mouse事件中有一個 buttons 屬性,該值標示鼠標按下了一個或者多個按鍵,如果按下的鍵為多個,值則為多個:
0 : 沒有按鍵或者是沒有初始化
1 : 鼠標左鍵
2 : 鼠標右鍵
4 : 鼠標滾輪或者是中鍵
8 : 第四按鍵 (通常是“瀏覽器后退”按鍵)
16 : 第五按鍵 (通常是“瀏覽器前進”)
多個值的時候,相當于進行|操作,即鼠標左右鍵同時按下時1|2=3。判斷是否按下左鍵可以用value&1!=0進行,例如左右鍵同時按下時3&1!=0是true,說明按下了左鍵。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。