解决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来取值。