JS中mouseup事件丟失的原因與解決辦法
前言
當(dāng)實(shí)現(xiàn)類(lèi)似Excel選中區(qū)域的功能時(shí)，經(jīng)常出現(xiàn) mouseup 事件丟失的情況，由于缺少了 mouseup 事件，導(dǎo)致一個(gè)完整的操作無(wú)法進(jìn)行。
如果你是想進(jìn)行拖拽移動(dòng)操作，也可以參考本文。
原因
目前發(fā)現(xiàn)兩個(gè)原因：
- 觸發(fā)了瀏覽器的 drag 操作，導(dǎo)致mouseup丟失。
- 由于鼠標(biāo)離開(kāi)了操作的區(qū)域，觸發(fā)了mouseleave導(dǎo)致mouseup丟失。
解決辦法
第一種情況
通過(guò)執(zhí)行下面的代碼阻止系統(tǒng)默認(rèn)的操作來(lái)防止觸發(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;
}
通過(guò)對(duì)事件調(diào)用pauseEvent方法可以防止出現(xiàn)drag操作，因此在區(qū)域內(nèi)可以避免mouseup丟失。即使你想實(shí)現(xiàn)的本來(lái)就是 drag 操作，也可以通過(guò)創(chuàng)建跟隨鼠標(biāo)移動(dòng)的dom元素實(shí)現(xiàn)效果。
第二種情況
由于鼠標(biāo)移到了區(qū)域外，觸發(fā)了 mouseleave 操作，因此在這種情況下要監(jiān)聽(tīng) 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 : 沒(méi)有按鍵或者是沒(méi)有初始化
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，說(shuō)明按下了左鍵。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
一直以來(lái)都在函數(shù)式編程的大門(mén)之外徘徊,要入門(mén)的話首先得熟悉各種高階函數(shù),數(shù)組的reduce方法就是其中之一,這篇文章主要給大家介紹了關(guān)于js利用reduce方法讓你的代碼更加優(yōu)雅的相關(guān)資料,需要的朋友可以參考下2021-08-08
本篇文章主要介紹了徹底解決webpack打包慢的解決辦法匯總，詳細(xì)的介紹了3種方法，有興趣的可以了解一下2017-07-07
腳本寫(xiě)的IE右鍵助手...2006-07-07
JavaScript中的"=、==、==="區(qū)別講解
今天小編就為大家分享一篇關(guān)于JavaScript中的"=、==、==="區(qū)別講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
H5跳轉(zhuǎn)小程序按鈕不顯示(wx-open-launch-weapp)踩坑指南
這篇文章主要給大家介紹了關(guān)于H5跳轉(zhuǎn)小程序按鈕不顯示(wx-open-launch-weapp)踩坑的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
JSON中雙引號(hào)的輪回使用過(guò)程中一定要小心
如果JSON對(duì)象中有屬性是包含雙引號(hào)當(dāng)轉(zhuǎn)換成字符串形式，將自動(dòng)加上反斜線，詳細(xì)請(qǐng)祥看本文2014-03-03
Javascript中內(nèi)建函數(shù)reduce的應(yīng)用詳解
內(nèi)建函數(shù)其實(shí)就是內(nèi)置函數(shù),reduce函數(shù)是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時(shí)的工作中，相信大家使用的場(chǎng)景并不多，這篇文章給大家詳細(xì)介紹了函數(shù)reduce的應(yīng)用以及多重疊加，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-10-10
這篇文章主要介紹了探究一道價(jià)值25k的螞蟻金服異步串行面試題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog用法總結(jié)
本篇文章主要是對(duì)JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog的用法進(jìn)行了總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過(guò)程
經(jīng)常在做app的時(shí)候,會(huì)有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關(guān)于uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11