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