mouseup 事件丢失的原因和解決辦法

說明

當實作類似Excel選中區域的功能時，經常出現 mouseup 事件丢失的情況，由于缺少了 mouseup 事件，導緻一個完整的操作無法進行。

如果你是想進行拖拽移動操作，也可以參考本文。

原因

目前發現兩個原因：

1. 觸發了浏覽器的 drag 操作，導緻mouseup丢失。
2. 由于滑鼠離開了操作的區域，觸發了mouseleave導緻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元素實作效果。

參考位址：

​​http://stackoverflow.com/questions/5429827/how-can-i-prevent-text-element-selection-with-cursor-drag​​

第二種情況

由于滑鼠移到了區域外，觸發了 mouseleave 操作，是以在這種情況下要監聽 mouseleave 操作，當觸發該操作時可以停止或者還原狀态。

特别注意的地方

當處理滑鼠事件時，可以還要考慮是否要控制按下那個鍵時才允許操作。

Mouse事件中有一個 ​

​buttons​

​ 屬性，該值标示滑鼠按下了一個或者多個按鍵，如果按下的鍵為多個，值則為多個：

• 0 : 沒有按鍵或者是沒有初始化
• 1 : 滑鼠左鍵
• 2 : 滑鼠右鍵
• 4 : 滑鼠滾輪或者是中鍵
• 8 : 第四按鍵 (通常是“浏覽器後退”按鍵)
• 16 : 第五按鍵 (通常是“浏覽器前進”)

多個值的時候，相當于進行​

​|​

​​操作，即滑鼠左右鍵同時按下時​

​1|2=3​

​​。判斷是否按下左鍵可以用​

​value&1!=0​

​​進行，例如左右鍵同時按下時​

​3&1!=0​

​​是​

​true​

​，說明按下了左鍵。