解決JavaScript拖動(dòng)時(shí)觸發(fā)點(diǎn)擊事件的BUG

Luosunce 發(fā)布于2019-08-21 16:24 / 1204人閱讀

摘要：解決思路仔細(xì)比較拖拽與點(diǎn)擊事件，發(fā)現(xiàn)拖拽事件多了一個(gè)，我們可以從這個(gè)入手，點(diǎn)擊事件時(shí)與觸發(fā)時(shí)鼠標(biāo)沒(méi)有移動(dòng)，而拖拽時(shí)鼠標(biāo)移動(dòng)了一定的距離，具體體現(xiàn)在上。此時(shí)為，可以觸發(fā)點(diǎn)擊事件。

bug的原因：

 一個(gè)完整的click事件是包含

     mousedown,mouseup

 兩個(gè)事件的，而拖拽一個(gè)元素時(shí)，包含下面三個(gè)事件：

     mousedown,mousemove,mouseup,

 所以我們?cè)谕献б粋€(gè)元素結(jié)束后，如果此元素上面綁定了點(diǎn)擊事件，
 就會(huì)同時(shí)觸發(fā)元素的點(diǎn)擊事件，用戶體驗(yàn)度不好。

解決思路

 仔細(xì)比較拖拽與點(diǎn)擊事件，發(fā)現(xiàn)拖拽事件多了一個(gè)mousemove，我們可以從這個(gè)mousemove入手，點(diǎn)擊事件
 時(shí)mousedown與mouseup觸發(fā)時(shí)鼠標(biāo)沒(méi)有移動(dòng)，而拖拽時(shí)鼠標(biāo)移動(dòng)了一定的距離，具體體現(xiàn)在px上。

解決辦法

 可以設(shè)定一個(gè)clickFlag變量，通過(guò)clickFlag來(lái)確定mousedown與mouseup到底是觸發(fā)了點(diǎn)擊事件還是
 拖動(dòng)事件：

     mousedown時(shí)記錄下鼠標(biāo)的位置x1，y1，mouseup時(shí)記錄下鼠標(biāo)的位置x2,y2，

 判斷兩次位置
 是否一樣或是相差小于一個(gè)定值（設(shè)為7px）:

     d = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))

 當(dāng)d=0或是小于7時(shí)，即可認(rèn)定用戶沒(méi)有拖拽。此時(shí)clickFlag為true，可以觸發(fā)點(diǎn)擊事件。

GPU云服務(wù)器云服務(wù)器 js 輸入時(shí)觸發(fā)事件 javascript點(diǎn)擊事件 js觸發(fā)頁(yè)面的點(diǎn)擊 html的點(diǎn)擊事件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/88500.html

相關(guān)文章

原生js練習(xí)題---第六課

摘要：自定義多級(jí)右鍵菜單實(shí)現(xiàn)效果自定義多級(jí)右鍵菜單第五課第六題中已經(jīng)通過(guò)事件實(shí)現(xiàn)了一級(jí)右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。 0x1完美拖拽實(shí)現(xiàn)效果：6-01完美拖動(dòng) 這里沒(méi)有使用h5的拖動(dòng)，畢竟原題也是考察借助鼠標(biāo)事件實(shí)現(xiàn)自定義的拖動(dòng)，所以就借鑒了《js高級(jí)程序設(shè)計(jì)》里的自定義拖動(dòng)自己封裝了個(gè)拖動(dòng)api，當(dāng)然由于做這個(gè)系列題目使用的都是es5的語(yǔ)法，所以IE8往下就兼容不...

tinyq 2019-08-19 18:17 評(píng)論0 收藏0
JavaScript 基礎(chǔ)知識(shí) - DOM篇(一)

摘要：前言本篇文章是基礎(chǔ)知識(shí)的篇，如果前面的基礎(chǔ)知識(shí)入門篇看完了，現(xiàn)在就可以學(xué)習(xí)了。基本概念分為三個(gè)部分。在這個(gè)基礎(chǔ)上使用一些新特性，高級(jí)瀏覽器支持，低級(jí)瀏覽器不支持。在對(duì)象中的屬性是一個(gè)布爾值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言本篇文章是JavaS...

cuieney 2019-08-22 13:40 評(píng)論0 收藏0
溫故js系列（10）-事件event

摘要：當(dāng)用戶選擇文本框或中的一個(gè)或多個(gè)字符觸發(fā)。當(dāng)文本框或內(nèi)容改變且失去焦點(diǎn)后觸發(fā)。事件對(duì)象事件對(duì)象就是對(duì)象，通過(guò)處理函數(shù)傳遞。比如右擊文本框輸入?yún)^(qū)域，會(huì)彈出系統(tǒng)菜單點(diǎn)擊超鏈接會(huì)跳轉(zhuǎn)到指定頁(yè)面點(diǎn)擊提交按鈕會(huì)提交數(shù)據(jù)。前端學(xué)習(xí)：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總歡迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 評(píng)論0 收藏0
mxGraph 入門實(shí)例教程

摘要：本教程會(huì)使用到語(yǔ)法，而第二部分的項(xiàng)目是用寫的。閱讀本教程需要你掌握這兩項(xiàng)預(yù)備知識(shí)。在中可以代表組節(jié)點(diǎn)邊，這個(gè)類封裝了的操作，本教程不涉及到組的內(nèi)容。表示在邊的正交線上移到的距離。 showImg(https://segmentfault.com/img/remote/1460000018510999?w=935&h=484); 在上一篇文章《記一次繪圖框架技術(shù)選型: jsPlumb ...

coordinate35 2019-08-23 15:54 評(píng)論0 收藏0
JavaScript操作DOM的那些坑

摘要：在操作中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時(shí)間整理，我將根據(jù)實(shí)例整理那些大大小小的坑。在火狐中，與等效的是。對(duì)象的屬性則表示文檔的根節(jié)點(diǎn)。不區(qū)分和在下使用和時(shí)會(huì)同時(shí)返回或與給定值相同的元素。 js在操作DOM中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時(shí)間整理，我將根據(jù)實(shí)例整理那些大大小小的坑。 DOM的工作模式是：先加載文檔的靜態(tài)內(nèi)容、再以動(dòng)態(tài)方式對(duì)它們進(jìn)行刷新，...

RiverLi 2019-08-21 10:29 評(píng)論0 收藏0