扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
前言
创新互联是专业的剑川网站建设公司，剑川接单;提供网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行剑川网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和大家分享交流一下。
注：下文出现的“采宝”二字，为这个功能的产品名。
先看效果
看这个效果，相信大部分开发都会觉得实现起来比较容易。在实际开发中，笔者总结了三个主要的坑点，及其解决方案。
三个坑点
（一）拖拽时会导致采宝放大缩小
我们在操作采宝时，不管是鼠标拖动还是点击放大缩小，我们的事件都需要绑定在采宝头部的图标上，这样我们就需要在图标上同时绑定点击和拖拽事件。但是当我们直接添加 click 事件和 mousedown 事件的时候，我们发现在触发 mousedown 事件的时候，也会去触发 click 事件。这样就会出现在拖动采宝的时候，采宝会放大和缩小。
这个效果是我们不想看到的，所以我们就需要区分开采宝上的 click 事件和 mousedown 事件，想办法使两个事件的触发相互不影响。
所以我们在同一个 DIV 上同时绑定 mousedown 事件和 click 事件，然后通过控制台输出每个事件，查看过程中的每个事件的触发顺序。
const moveBox = document.querySelector('.move');
moveBox.onmousedown = function (evt) {
console.log('触发鼠标按下')
moveBox.onmousemove = function (evt) {
console.log('触发鼠标拖动')
}
}
function moveBoxClick(e) {
console.log('触发click')
}
moveBox.onmouseup = function () {
console.log('触发鼠标抬起')
} 
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网