如何用原生JavaScript实现一个基础的框选功能？

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

今天我们来聊一聊如何使用原生JavaScript编写一个简单的框选功能。要求如下：

- 鼠标左键按下不放，移动鼠标出现矩形选框；- 鼠标左键松开，根据选框范围自动计算选中内容。

具体实现步骤：

1.监听鼠标按下事件，记录起始坐标；

2.监听鼠标移动事件，根据起始坐标和当前坐标绘制矩形选框；

3.监听鼠标松开事件，根据选框范围计算选中内容。

今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能。

需求描述

• 鼠标左键按下不放，移动鼠标出现矩形选框；
• 鼠标左键松开，根据上边出现的矩形选框统计选框范围内的DOM元素；

嗯...上边的功能描述看着是挺简单的，但实现起来也还是会有些地方需要斟酌思考的。比如，如果我们的框选范围不是document.body，而是某一个div里边进行框选呢？而现实开发过程中，我们会遇上的应该就是第二种情况。

点击查看完整的源码

怎么实现

二话不说，咱们动手写代码吧！因为更好的兼容性，这里就避免了一些ES6的语法，如果是用的其他框架来写的话，代码上相应的也要做一些调整。