之前制作了一个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来取值。
分享到：
相关推荐
例如，在IE中，可以使用`event.clientX`和`event.clientY`，而在Firefox中，则需要使用`event.pageX`和`event.pageY`。为了统一处理，可以采用以下方法： ```javascript function test(event) { var event = event...
若要获取包括滚动条距离的坐标，IE提供了`event.offsetX`和`event.offsetY`，Firefox对应的属性为`event.layerX`和`event.layerY`。 在定位元素位置时，IE支持`style.posLeft`和`style.posTop`，但Firefox不支持。...
window.event对象差异 IE：有window.event对象 FF：没有window.event对象。... 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：styl
- `event.offsetX` 和 `event.offsetY`：它们表示鼠标相对于触发事件的元素左上角的偏移量，这在拖拽过程中非常有用，因为我们可以据此计算div的新位置。 2. **div拖拽实现**： - 当用户按下鼠标按钮时，我们需要...
window.event IE：有window.event对象 FF：没有window.event对象。... 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：style.posL
- **removeNode** 和 **swapNode** 方法主要用于DOM操作，在IE中可用，但在Firefox和其他基于Webkit或Gecko引擎的浏览器中并不支持。 - 为了解决这一问题，可以通过自定义原型的方式，使Firefox等浏览器也能支持这些...
window.event IE：有window.event对象 FF：没有window.event对象。... 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：sty
在探讨JavaScript中如何处理鼠标点击事件时，首先需要了解不同主流浏览器（如Internet Explorer、Firefox和Opera）对于事件的处理差异。编写兼容各个浏览器的事件监听代码对于前端开发者而言是一项基本而重要的技能...
- **鼠标位置（考虑滚动条）**：IE使用event.offsetX和event.offsetY，FF使用event.layerX和event.layerY。通用做法是`var x = event.offsetX || event.layerX; var y = event.offsetY || event.layerY;` 3. **...
本文档将介绍如何使用JavaScript来捕获鼠标的按键事件，并根据不同的浏览器环境（如IE、Firefox、Opera等）进行兼容性处理。 #### 二、JavaScript捕获键盘按键 在JavaScript中，可以利用`onkeydown`事件监听键盘...
Firefox浏览器中没有layerX和layerY属性，但可以通过添加定位信息来使用offsetX和offsetY。 5. offsetX和offsetY属性 offsetX和offsetY属性表示鼠标指针相对于事件目标元素的位置。当鼠标指向某个按钮时，offsetX和...
对于鼠标在特定容器内的相对坐标，`event.offsetX`和`event.offsetY`则非常有用，它们返回鼠标相对于事件源元素的左上角的坐标。 当需要考虑整个文档的滚动时，可以通过`document.documentElement.scrollTop`获取...
首先不同浏览器中event位置属性的... IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数) 然后是DOM对象高度属性分析 1.
- **Firefox**: 使用 `event.pageX` 和 `event.pageY` 来获取相对于视口的坐标位置；使用 `event.layerX` 和 `event.layerY` 获取相对于触发事件元素的坐标位置。 为了统一获取坐标位置，可以采用如下方法： ```...
这需要用到`event.offsetX`和`event.offsetY`，或者在Firefox和Safari中使用`event.layerX`和`event.layerY`。然而，这两个属性并不一致：Firefox和Safari将位置基于元素的边框外壁，其他浏览器则是基于边框内壁。...
- 在不同浏览器环境下（如IE、Firefox、Chrome等）实现一致性的解决方案。 - 获取鼠标相对于页面或特定元素的坐标的方法。 - 使用DOM操作来动态更新用户界面上的信息。 #### 详细知识点解析 ##### 1. 事件监听器与...
- IE的`event.offsetX`和`event.offsetY`用于获取相对于元素边界的鼠标位置。 - Mozilla的`event.layerX`和`event.layerY`起相同作用。同样，需要自定义处理以实现兼容性。 6. **事件绑定**： - IE使用`...