這篇文章主要跟大家介紹了關于Javascript中mouseup事件丟失的原因與解決辦法的相關資料，文中給出詳細的示例代碼供大家參考學習，需要的朋友們下面跟著小編一起來學習學習吧。

前言

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

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

原因

目前發現兩個原因：觸發了瀏覽器的 drag 操作，導致mouseup丟失。

由于鼠標離開了操作的區域，觸發了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元素實現效果。

第二種情況

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

特別注意的地方

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

Mouse事件中有一個 buttons 屬性，該值標示鼠標按下了一個或者多個按鍵，如果按下的鍵為多個，值則為多個：

0 : 沒有按鍵或者是沒有初始化

1 : 鼠標左鍵

2 : 鼠標右鍵

4 : 鼠標滾輪或者是中鍵

8 : 第四按鍵 (通常是“瀏覽器后退”按鍵)

16 : 第五按鍵 (通常是“瀏覽器前進”)

多個值的時候，相當于進行|操作，即鼠標左右鍵同時按下時1|2=3。判斷是否按下左鍵可以用value&1!=0進行，例如左右鍵同時按下時3&1!=0是true，說明按下了左鍵。

總結

總結

以上是生活随笔為你收集整理的mouseup 左键_javascript中mouseup事件丢失的原因与解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。