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