首頁  >  文章  >  web前端  >  javascript中mouseup事件遺失的原因與解決辦法

javascript中mouseup事件遺失的原因與解決辦法

陈政宽~
陈政宽~原創
2017-06-28 12:45:343145瀏覽

這篇文章主要跟大家介紹了關於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 : 滑鼠左鍵

      鼠標滾輪或者是中鍵

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

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

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

總結

#

以上是javascript中mouseup事件遺失的原因與解決辦法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn