使用原生JS实现局部DOM元素框选功能

本文将介绍如何使用原生JavaScript实现一个简单的框选功能，适用于在一个特定的div内选择DOM元素。该功能包括鼠标左键按下时显示矩形选框，松开鼠标时计算选框内包含的DOM元素。为了保证兼容性，代码中未使用ES6语法。 在实际开发中，我们经常遇到需要在某个特定容器内进行框选操作的情况，而非整个document.body。为此，我们需要考虑如何在div内跟踪鼠标移动并生成选框。为了实现这一功能，我们需要监听鼠标事件，如mousedown、mousemove和mouseup，并使用定时器来检测鼠标是否持续按下。 首先，在HTML中设置样式和要选择的div元素。这些div将作为示例的可选元素，具有蓝色背景和固定尺寸。 接着，通过JavaScript实现以下步骤： 1. 定义变量：`mouseStopId`用于存储定时器ID，`mouseOn`标记框选状态，`startX`和`startY`记录鼠标按下时的位置。 2. 添加鼠标按下监听事件（mousedown），在事件处理函数中，首先阻止事件冒泡，然后检查是否为左键按下。 3. 在鼠标按下时，启动定时器，设置`mouseOn`为true，并记录鼠标位置。 4. 添加鼠标移动监听事件（mousemove），当`mouseOn`为true时，计算选框的坐标，可以使用`offsetTop`和`offsetLeft`获取元素相对于其offsetParent的位置。 5. 添加鼠标松开监听事件（mouseup），关闭定时器，计算选框内的DOM元素。这可以通过遍历所有子元素，比较它们的坐标与选框的相对位置来实现。 6. 如果选框范围不在指定div内，需要对坐标进行转换，以适应局部坐标系统。 完整的代码实现可能包括以下内容： ```javascript // 避免事件冒泡 function clearEventBubble(e) { e.stopPropagation(); } // 监听鼠标按下事件 document.body.addEventListener('mousedown', function (e) { if (e.buttons !== 1 || e.which !== 1) return; mouseOn = true; startX = e.clientX; startY = e.clientY; // 启动定时器 mouseStopId = setInterval(checkMouse, 100); }); // 监听鼠标移动事件 document.body.addEventListener('mousemove', function (e) { if (!mouseOn) return; // 计算选框坐标 var endX = e.clientX; var endY = e.clientY; // 更新选框（这里需要添加绘制选框的逻辑） }); // 监听鼠标松开事件 document.body.addEventListener('mouseup', function () { clearInterval(mouseStopId); mouseOn = false; // 计算并处理选框内的DOM元素 // ... }); ``` 请注意，上面的代码只是一个基础框架，实际实现还需要补充绘制选框的逻辑以及计算选框内DOM元素的部分。绘制选框可能需要用到CSS或者直接在canvas上操作，而统计选框内的元素则需要遍历DOM树并比较坐标。 总结来说，使用原生JavaScript实现一个简单的框选功能涉及到的关键技术点包括鼠标事件的监听、定时器的使用、DOM元素的坐标获取（offsetTop和offsetLeft）以及坐标系统的转换。通过理解这些概念，我们可以创建自定义的框选功能，以满足特定场景的需求。