如何用纯JS编写实现网页元素放大缩小和拖拽功能的代码？

本文共计2279个文字，预计阅读时间需要10分钟。

前言：最近团队需要开发一个智能客服悬浮窗功能，需要支持滑动、放大缩小等操作。因为这个是全局插件，为了兼容性考虑，需要使用原生+JS实现，不引入任何第三方库或插件。

开发过程：

前言

最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和大家分享交流一下。

注：下文出现的“采宝”二字，为这个功能的产品名。

先看效果

看这个效果，相信大部分开发都会觉得实现起来比较容易。在实际开发中，笔者总结了三个主要的坑点，及其解决方案。

三个坑点

• 拖拽采宝时会导致采宝放大缩小
• 采宝显示在屏幕边界时被遮挡显示不全
• 采宝放大和缩小后，位置发生变化

（一）拖拽时会导致采宝放大缩小

我们在操作采宝时，不管是鼠标拖动还是点击放大缩小，我们的事件都需要绑定在采宝头部的图标上，这样我们就需要在图标上同时绑定点击和拖拽事件。但是当我们直接添加 click 事件和 mousedown 事件的时候，我们发现在触发 mousedown 事件的时候，也会去触发 click 事件。这样就会出现在拖动采宝的时候，采宝会放大和缩小。