之前制作了一个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来取值。
分享到：
相关推荐
window.event对象差异 IE：有window.event对象 FF：没有window.event对象。... 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：styl
window.event IE：有window.event对象 FF：没有window.event对象。... 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：style.posL
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <head> </head> [removed] function reload(){ [removed]....
window.event IE：有window.event对象 FF：没有window.event对象。... 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：sty
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了，很让人头大！如下： event.layerX event....
1.window.event IE：有window.event对象 FF：没有window.event对象，可以通过函数的参数传递event对象。如onclick=clickHandler(event)...3. 鼠标坐标加上滚动条滚过的距离 IE：event.offsetX和event.offsetY FF：event
window.event IE：有window.event对象 FF：没有window.event对象。... 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：style.posL
首先不同浏览器中event位置属性的... IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数) 然后是DOM对象高度属性分析 1.
测试浏览器的版本: IETester 6 ,7 IE 8.0 Firefox 3.5.5 Chrome 4.1.249.1064 (45376) Opera 9.64 Safari 4.0 先来看看各个主流浏览器都有哪些坐标属性以及它们的意义 在IE中 event.offsetX event.offsetY 相对于e....
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
以上主要指IE之中，FireFox差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + ...
鼠标相对于元素的坐标点(不计算边框 ) 事件对象.offsetX（水平方向） 事件对象.offsetY（垂直方向） 鼠标相对于元素的坐标点(计算边框 ) 事件对象.clientX; 事件对象.clientY; 元素可用区域的边缘到光标的位置 不...
event.offsetX 返回当前鼠标悬停X坐标值 event.offsetY 返回当前鼠标悬停Y坐标值 [removed](document.lastModified) 网页最后一次更新时间 [removed]=x 当双击鼠标产生事件 [removed]=x 单击鼠标键产生事件 ...
NULL 博文链接：https://meizhi.iteye.com/blog/576133
该代码演示了各个鼠标位置属性，并实现了一个div拖拽框，支持ie和firefox
Event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。一旦事件发生,便会生成Event对象，如单击一个按钮，浏览器的内存中就产生相应的 event对象。 event对象只在事件发生的过程中才有效。 ...
一个简单的例子：判断...evnt) { evnt = window.event; } var offsetX = evnt.offsetX ? evnt.offsetX : evnt.layerX; if(evnt.offsetX < ele.offsetWidth / 2) { return ‘left’; } else { return ‘right’; } }
javascript offsetX与layerX区别.docx
1、为ScriptManager添加脚本引用，不从ScriptResource.axd中加载MicrosoftAjax.js脚本，而是直接加载 ~/ScriptLibrary/System.Web.Extensions/1.0.61025.0/MicrosoftAjax.js" /> 2、修改MicrosoftAjax....