解决FireFox的鼠标Event中没有offsetX,offsetY的办法

之前制作了一个html版的连连看，最近改成html5版的，遇到了如何获取当前点击图片的问题。

因为之前的连连看用的图片是一个个零碎的图片，放入一个固定大小的div中，然后设置图片统一向左浮动。通过js事件委托，当点击图片的时候，查找当前event的target，就能得到点击的图片。

但是改成html5之后，所有的图片都被画在一个canvas里，鼠标点击的时候只能获取到整个canvas Element，所以得另寻思路。

 

 

我想到的办法是把点击事件绑定在canvas上，然后通过鼠标相对canvas的偏移offsetX/Y除以图片的width/height向下取整，这样就能将canvas里图片转换成一个2维数组，与我的map数组对应起来，从而解决获取图片的问题。

如何您有更好的办法，还请赐教。

 

可是FF的event中没有offsetX/Y，而是提供了一个layerX/Y。

那我们就来研究下这个layerX/Y是什么，与offsetX/Y有什么不同。

我们知道在各大主流浏览器的鼠标点击事件中，有clientX/Y、offsetX/Y(FF除外)、screenX/Y、pageX/Y（ie系列除外）等属性。

其中：

clientX/Y是鼠标相对与浏览器视口的偏移；

offsetX/Y是鼠标相对于绑定点击事件的element的偏移；

screenX/Y是鼠标相对于整个屏幕的偏移；

pageX/Y是鼠标相对于documentElement/body的偏移；

 

 

而layerX/Y只有FF提供，是鼠标相对于事件绑定element的最近的设置了position属性 的element。

在我的例子中，canvas element的最近的设置了position属性的element是外层的wrap，所以offsetX/Y的值是从外层wrap的左上角开始计算的。

搞清楚这一点，我们只需要给canvas 加一个position为relative的样式即可让layerX/Y等价于offsetX/Y，从而解决FF下没有offsetX/Y的问题！

 

总结一下，解决FF下offsetX/Y的办法就是给绑定事件的element设置一个postion为relative的样式，然后通过layerX/Y来取值。