使用JavaScript怎么实现一个框选功能

添加鼠标事件监听

由于js自身并没有带有鼠标点击按住不放这样子的事件，这里我们不仅需要检测鼠标左键点击按下，还要加一个定时器来检测鼠标是否按住不放了。

添加框选可视化元素

框选可视化元素示意图

我们有了事件监听还不够，为了更好的交互效果，我们需要一个随时跟随着鼠标移动的框选框元素，用于让用户随时感知框选范围。

添加鼠标松开事件监听

元素是否被选中示意图

我们没有在鼠标移动的时候去实时统计被框选到的DOM元素，如果需要实时统计或者实时修改被选择的DOM元素的样式，以便更准确的让用户感知到被框选的内容的话，可以选择在mousemove事件里边去实现以下代码：

这里判断一个元素是否被选中采用的判断条件是：

• 该DOM元素的最右边（fileDiv[i].offsetLeft + fileDiv[i].offsetWidth）是否要比选框元素最左边（selDiv.offsetLeft）的位置要小；

• 该DOM元素的最下边（fileDiv[i].offsetTop + fileDiv[i].offsetHeight）是否要比选框元素的最上边（selDiv.offsetTop）的位置要大；

• 该DOM元素的最左边（fileDiv[i].offsetLeft）是否要比选框元素的最后边(selDiv.offsetLeft + selDiv.offsetWidth)的位置数值要小；

• 该DOM元素的最上边（fileDiv[i].offsetTop）是否要比选框元素的最下边（selDiv.offsetTop + selDiv.offsetHeight）的位置数值要小；

满足了以上四个条件，即可判别为该DOM元素被选中了。

实际应用

上边的例子，举得有些过于简单了。实际的开发当中，框选的范围往往不可能是整个document.body，而是某一个具体的有特定宽度跟高度限制的元素。这个时候，就还需要考虑这个框选容器元素造成的定位偏差，以及容器内元素过多，出现滚动条的情况了。

乍一看，上边的情况需要考虑的因素多了不少，比较容易乱。我这里采用的方法是修改坐标系的方式来实现上边描述的功能。上文我们已经实现了在document.body整个页面左上角顶点作为坐标原点来实现框选功能，这时候我们需要修改坐标原点为框选容器的左上角顶点作为坐标原点即可。

换言之，就是修改mousedown跟mousemove事件时，初始位置由原来的e.clientX跟e.clientY修改为e.clientX - selectContaienr.offsetLeft + selectContainer.scrollLeft跟e.clientY - selectContainer.offsetTop + selectContainer.scrollTop。

坐标更改shi'yi'tu

JavaScript是什么

JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。

以上就是使用JavaScript怎么实现一个框选功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。