最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发。在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的。但是现实需求里几乎都是针对某个区域的框选。如果用绝对定位实现就比较繁琐了,需要调整定位原点。下面介绍一种基于Fixed定位的框选实现。 需求描述 按住鼠标左键不放,移动鼠标出现选择框 在鼠标移动的过程中,在框选范围内的元素高亮 松开鼠标左键,弹出编辑框,批量操作所有被框选的元素 实现 事件绑定 首先梳理一下需要用到的事件。 按住鼠标左键,因为并没有原生的鼠标左键按下事件,所以使用mousedow