目錄

• 一、起因及解決
• 解決：
• 總結(jié)：

一、起因及解決

由于很少使用除了click的監(jiān)聽(tīng)事件，今天在使用mouseup時(shí)遇到一個(gè)坑，找了好久的bug。事情是這樣的，我在寫一個(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)文章！