前言

創(chuàng)新互聯(lián)長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為忻州企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、網(wǎng)站制作，忻州網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

當(dāng)實(shí)現(xiàn)類似Excel選中區(qū)域的功能時(shí)，經(jīng)常出現(xiàn) mouseup 事件丟失的情況，由于缺少了 mouseup 事件，導(dǎo)致一個(gè)完整的操作無法進(jìn)行。

如果你是想進(jìn)行拖拽移動(dòng)操作，也可以參考本文。

原因

目前發(fā)現(xiàn)兩個(gè)原因：

• 觸發(fā)了瀏覽器的 drag 操作，導(dǎo)致mouseup丟失。
• 由于鼠標(biāo)離開了操作的區(qū)域，觸發(fā)了mouseleave導(dǎo)致mouseup丟失。
  

解決辦法

第一種情況

通過執(zhí)行下面的代碼阻止系統(tǒng)默認(rèn)的操作來防止觸發(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;
}

通過對(duì)事件調(diào)用pauseEvent方法可以防止出現(xiàn)drag操作，因此在區(qū)域內(nèi)可以避免mouseup丟失。即使你想實(shí)現(xiàn)的本來就是 drag 操作，也可以通過創(chuàng)建跟隨鼠標(biāo)移動(dòng)的dom元素實(shí)現(xiàn)效果。

第二種情況

由于鼠標(biāo)移到了區(qū)域外，觸發(fā)了 mouseleave 操作，因此在這種情況下要監(jiān)聽 mouseleave 操作，當(dāng)觸發(fā)該操作時(shí)可以停止或者還原狀態(tài)。

特別注意的地方

當(dāng)處理鼠標(biāo)事件時(shí)，可以還要考慮是否要控制按下那個(gè)鍵時(shí)才允許操作。

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

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

      1 : 鼠標(biāo)左鍵

      2 : 鼠標(biāo)右鍵

      4 : 鼠標(biāo)滾輪或者是中鍵

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

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

多個(gè)值的時(shí)候，相當(dāng)于進(jìn)行|操作，即鼠標(biāo)左右鍵同時(shí)按下時(shí)1|2=3。判斷是否按下左鍵可以用value&1!=0進(jìn)行，例如左右鍵同時(shí)按下時(shí)3&1!=0是true，說明按下了左鍵。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

網(wǎng)站標(biāo)題：JS中mouseup事件丟失的原因與解決辦法
本文URL：http://www.chinadenli.net/article0/iieeoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站排名、企業(yè)建站、關(guān)鍵詞優(yōu)化、服務(wù)器托管、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)