求一个算法

Question

有20个一样的 float left, width=50，height=50的div  
.drop{width:50px;height:50px;float:left;}  
现在 已知 每个div的 scrollleft=xn,scrolltop=yn。格式如下drop=[{x1,y1},{x2,y2},.....]
现在当移动鼠标时  如何判断 鼠标 e.clientX e.clientY在 drop 内 。如果在drop内，则背景颜色改变
我的想法是  当鼠标移动时
遍历drop 数组， 判断 
e.clientX>drop[n].xn&&e.clientX<drop[n].xn+50&&e.clientY>drop[n].xn&&e.clientY<drop[n].xn+50
但是这样的话，鼠标移动一下就算一次，遍历一次数组。那很麻烦吧。

Answer 1

为何不尝试下面的代码。<div onmouseover="this.style.backgroundColor='red'" ... >
....
</div>

Answer 2

lz你的想法没错, 如果在mousemove中添加事件会造成非常大的计算负担. 之前的项目做过实验, 你也可以自己试一下, 例如在mousemove的时候var N个变量, 并赋值. 会发现即使做过解析优化的浏览器也承受不了太多的mousemove的运算逻辑, 更何况里面还有css渲染的功能. 所以说解决方案: 
1. 如1#所说用mouseover, 这是原生的事件监听, 效率很高, 但是有些时候无法侦测到mouseover事件, 比如要监听的div被其他大层遮盖
2. 如果要在mousemove中添加计算, 就设立一个状态moving. 在鼠标移动时, 将moving置true, 并设定一个延时时间, 时间过后moving置false. 并触发计算及变色的处理逻辑. 这种方法可以减少mousemove的事件处理压力. lz可以试一下

Answer 3

恩，谢谢 wz_307 的想法。
其实我就是在考虑，jquery ui的，drag，drop，拖放功能
就是把一个drag 移动到 drop 时，drop变色。通过判断鼠标的位置是否在drop之内来实现。