JS的鼠標(biāo)監(jiān)聽(tīng)mouseup鼠標(biāo)抬起失效原因及解決
一、起因及解決
由于很少使用除了click的監(jiān)聽(tīng)事件，今天在使用mouseup時(shí)遇到一個(gè)坑，找了好久的bug。事情是這樣的，我在寫(xiě)一個(gè)表情框，為了實(shí)現(xiàn)鼠標(biāo)拖動(dòng)表情框時(shí)，移動(dòng)到相應(yīng)的位置。所以配合使用到了mousedown和mouseup和mosemove。
1.mosedown: 用于鼠標(biāo)按下進(jìn)行選中該表情區(qū)域?yàn)榭赏蟿?dòng)；
2.mosemove：鼠標(biāo)移動(dòng)時(shí)，判斷表情區(qū)域是否可拖動(dòng)，，若可拖動(dòng)，則開(kāi)始允許拖動(dòng)；
3.mouseup: 鼠標(biāo)抬起該表情區(qū)域不可拖動(dòng)；
但是我遇到的問(wèn)題是，鼠標(biāo)按下時(shí)，該表情區(qū)域可以拖動(dòng)，但是鼠標(biāo)松開(kāi)時(shí)，表情區(qū)域還是可以根據(jù)我的鼠標(biāo)位置進(jìn)行拖動(dòng)。
如下：
![上傳中...]()
可以看到，我鼠標(biāo)松開(kāi)時(shí)，本來(lái)不可以移動(dòng)的，但是現(xiàn)在卻可以移動(dòng)，后來(lái)研究了一下，發(fā)現(xiàn)表情區(qū)域怎么被我選中變色了，然后查了一下使用css禁止選中，就正常了。如下：
解決：
// 表情盒子樣式
.emojiBox {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
總結(jié)：
其實(shí)mouseup并沒(méi)有失效，而是你拖動(dòng)時(shí)，鼠標(biāo)選中了其他的元素，其實(shí)的話，鼠標(biāo)即使松開(kāi)，瀏覽器內(nèi)部還是認(rèn)為用戶在復(fù)制文字，鼠標(biāo)還是按下的狀態(tài)，所以不會(huì)觸發(fā)mouseup事件。
以上就是JS的鼠標(biāo)監(jiān)聽(tīng)：mouseup（鼠標(biāo)抬起）失效的詳細(xì)內(nèi)容，更多關(guān)于JS的鼠標(biāo)監(jiān)聽(tīng)：mouseup（鼠標(biāo)抬起）失效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了TypeScript接口，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。下面我們一起進(jìn)入文章看看TypeScript接口得具體定義吧,需要的朋友也可以參考一下2021-12-12
JavaScript如何在前端代碼中讀、寫(xiě)本地文件
在前端JavaScript中,由于安全考慮瀏覽器不允許直接操作文件系統(tǒng),但瀏覽器提供了有限的文件操作能力,這篇文章主要介紹了JavaScript如何在前端代碼中讀、寫(xiě)本地文件的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序復(fù)選框組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了微信小程序 參數(shù)傳遞實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
JavaScript是單線程的編程語(yǔ)言，只能同一時(shí)間內(nèi)做一件事。但是在遇到異步事件的時(shí)候，js線程并沒(méi)有阻塞，還會(huì)繼續(xù)執(zhí)行。這是因?yàn)镴S有事件循環(huán)機(jī)制，本文就為大家詳細(xì)講解一下這一機(jī)制，需要的可以參考一下2022-03-03
這篇文章主要介紹了javaScript中this用法,實(shí)例分析了javascript中this的用途與相關(guān)的使用技巧,需要的朋友可以參考下2015-05-05
BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio
這篇文章主要介紹了BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio的相關(guān)資料,需要的朋友可以參考下2017-05-05
easyui form validate總是返回false的原因及解決方法
下面小編就為大家?guī)?lái)一篇easyui form validate總是返回false的原因及解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
找到了一篇jQuery與Prototype并存的沖突的解決方法
找到了一篇jQuery與Prototype并存的沖突的解決方法...2007-08-08
這篇文章主要給大家介紹了關(guān)于blob文件流前端顯示pdf的三種方法,困擾我一個(gè)晚上的問(wèn)題,終于解決了,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04