前言

創(chuàng)新互聯(lián)是專業(yè)的劍川網(wǎng)站建設(shè)公司，劍川接單;提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行劍川網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

最近團(tuán)隊(duì)需要做一個智能客服懸浮窗功能，需要支持拖動、放大縮小等功能，因?yàn)檫@個是全局插件，為了兼容性考慮全部使用原生 JS 實(shí)現(xiàn)，不引用任何第三方庫或者插件。開發(fā)過程中遇到的一些問題及解決方法，在這里和大家分享交流一下。

注：下文出現(xiàn)的“采寶”二字，為這個功能的產(chǎn)品名。

先看效果

看這個效果，相信大部分開發(fā)都會覺得實(shí)現(xiàn)起來比較容易。在實(shí)際開發(fā)中，筆者總結(jié)了三個主要的坑點(diǎn)，及其解決方案。

三個坑點(diǎn)

• 拖拽采寶時會導(dǎo)致采寶放大縮小
• 采寶顯示在屏幕邊界時被遮擋顯示不全
• 采寶放大和縮小后，位置發(fā)生變化

（一）拖拽時會導(dǎo)致采寶放大縮小

我們在操作采寶時，不管是鼠標(biāo)拖動還是點(diǎn)擊放大縮小，我們的事件都需要綁定在采寶頭部的圖標(biāo)上，這樣我們就需要在圖標(biāo)上同時綁定點(diǎn)擊和拖拽事件。但是當(dāng)我們直接添加 click 事件和 mousedown 事件的時候，我們發(fā)現(xiàn)在觸發(fā) mousedown 事件的時候，也會去觸發(fā) click 事件。這樣就會出現(xiàn)在拖動采寶的時候，采寶會放大和縮小。

 

這個效果是我們不想看到的，所以我們就需要區(qū)分開采寶上的 click 事件和 mousedown 事件，想辦法使兩個事件的觸發(fā)相互不影響。

所以我們在同一個 DIV 上同時綁定 mousedown 事件和 click 事件，然后通過控制臺輸出每個事件，查看過程中的每個事件的觸發(fā)順序。

const moveBox = document.querySelector('.move');
moveBox.onmousedown = function (evt) {
 console.log('觸發(fā)鼠標(biāo)按下')
 moveBox.onmousemove = function (evt) {
 console.log('觸發(fā)鼠標(biāo)拖動')
 }
}
function moveBoxClick(e) {
 console.log('觸發(fā)click')
}
moveBox.onmouseup = function () {
 console.log('觸發(fā)鼠標(biāo)抬起')
}

當(dāng)前標(biāo)題：純JS實(shí)現(xiàn)放大縮小拖拽功能(完整代碼)-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/cdpeph.html