JavaScript中IE与Firefox兼容性差异详解：事件、坐标与DOM操作

window.event对象差异

在IE浏览器中，可以直接访问window.event对象以获取当前事件信息。

Firefox浏览器不支持直接访问window.event对象。需要通过函数参数显式传递event对象，例如在事件处理函数中定义参数：onmousemove=doMouseMove(event)。

获取鼠标当前坐标

在IE浏览器中，获取鼠标坐标可使用event.x和event.y属性。

在Firefox浏览器中，获取鼠标坐标应使用event.pageX和event.pageY属性。

IE和Firefox均支持event.clientX和event.clientY属性，可用于获取鼠标相对于视口的位置，这是通用的解决方案。

鼠标当前坐标(加上滚动条滚过的距离)

在IE浏览器中，获取鼠标相对于触发事件元素的偏移量可使用event.offsetX和event.offsetY属性。

在Firefox浏览器中，获取鼠标相对于触发事件元素的偏移量应使用event.layerX和event.layerY属性。

标签的x和y的坐标位置：style.posLeft 和 style.posTop

IE浏览器支持通过element.value或element["value"]直接获取标签的自定义属性值。

Firefox浏览器不支持通过element.value或element["value"]直接获取标签的自定义属性值。

通用做法是使用object.offsetLeft和object.offsetTop来获取元素相对于定位父元素的偏移位置，这在IE和Firefox中均有效。

获取窗体的高度和宽度

在IE浏览器中，可通过document.body.offsetWidth和document.body.offsetHeight获取窗口尺寸，但前提是页面必须包含body标签。

在Firefox浏览器中，获取窗口尺寸可使用window.innerWidth和window.innerHeight，或者document.documentElement.clientWidth和document.documentElement.clientHeight。

通用做法是使用document.body.clientWidth和document.body.clientHeight获取窗口尺寸，这在IE和Firefox中均有效。

添加事件

在IE浏览器中，绑定事件推荐使用element.attachEvent("onclick", func)方法。

在Firefox浏览器中，绑定事件推荐使用element.addEventListener("click", func, true)方法。

通用做法是直接使用element.onclick=func。虽然IE和Firefox都支持onclick，但其行为与attachEvent和addEventListener不同：onclick仅能绑定一个处理函数，而attachEvent和addEventListener可以绑定多个处理函数并按顺序执行。例如，连续调用element.attachEvent("onclick", func1)和element.attachEvent("onclick", func2)，func1和func2都会被执行。

关于通用的添加和删除事件绑定函数，可参考文章《JavaScript跨浏览器的添加删除事件绑定函数》。

标签的自定义属性

在IE浏览器中，如果为div1标签定义了自定义属性value，可以通过div1.value或div1["value"]直接获取该值。

在Firefox浏览器中，不能通过div1.value或div1["value"]直接获取自定义属性值。

通用做法是使用div1.getAttribute("value")来获取标签的自定义属性值，这在IE和Firefox中均有效。

父节点、子节点和删除节点

在IE浏览器中，获取父节点使用parentElement，获取子节点使用parentElement.children，删除节点使用element.removeNode(true)。

在Firefox浏览器中，获取父节点使用parentNode，获取子节点使用parentNode.childNodes，删除节点使用node.parentNode.removeChild(node)。

clientX,pageX,offsetX,x,layerX,screenX,offsetLeft

screenX表示鼠标在显示屏幕上的坐标，该属性在IE和Firefox中均通用。

clientX表示鼠标在页面显示区域（视口）内的坐标，该属性在IE和Firefox中均通用。

注意：screenX和clientX是各浏览器通用的属性。以下介绍的是各浏览器特有的坐标属性及其差异。

pageX是Firefox特有属性，表示鼠标在页面上的位置，从页面左上角开始定位。IE没有直接对应的属性，但pageX可方便地进行全页面定位。

layerX是Firefox特有属性，表示鼠标相对于触发事件元素的层级关系中离该元素最近的、设置了position的父元素的边界位置，从border的左上角开始定位。如果父元素存在border，坐标原点位于border左上角而非内容区域左上角。

offsetX是IE特有属性，表示鼠标相对于触发事件元素的位置，从内容区域左上角开始定位，而非border左上角。该属性便于判断鼠标在元素内的具体位置，Firefox没有直接对应的属性。

x是IE特有属性，效果与layerX相同，可作为layerX的直接替换属性。

注意：IE和Firefox在定位上存在1px的差异。实际上，IE的定位从0开始，而Firefox从1开始，因此Firefox的计算结果通常比IE大1px，开发时需根据具体情况处理。

offsetLeft不是事件对象的属性，而是所有DOM对象都具备的属性，表示DOM对象在其层级关系中离该对象最近的、设置了position的父对象中的位置。不同浏览器对该属性的实现效果不同。

在Firefox中，offsetLeft严格按上述说明执行。但在IE6/7中，该属性返回DOM对象在其直接父对象中的位置。IE8修正了此问题，但引入了新问题：其他浏览器从父对象的内容区域左上角开始定位，而IE8从父元素的border左上角开始定位。由于测试环境为IETester中的IE8，无法排除是IETester本身的问题。