Summary of differences and compatibility between IE and Firefox under Javascript_javascript skills

Differences in window.event objects
IE: There is a window.event object
FF: There is no window.event object. Event objects can be passed as arguments to functions. For example, onmousemove=doMouseMove(event)

Get the current coordinates of the mouse
IE: event.x and event.y.
FF: event.pageX and event.pageY.
Common: Both have event.clientX and event.clientY properties.

The current coordinates of the mouse (plus the distance the scroll bar has rolled)
IE: event.offsetX and event.offsetY.
FF: event.layerX and event.layerY.

The x and y coordinate positions of the label: style.posLeft and style.posTop
IE: Yes.
FF: No.
Common: object.offsetLeft and object.offsetTop.


Get the height and width of the form
IE: document.body.offsetWidth and document.body.offsetHeight. Note: The page must have a body tag at this time.
FF: window.innerWidth and window.innerHegiht, and document.documentElement.clientWidth and document.documentElement.clientHeight.
Common: document.body.clientWidth and document.body.clientHeight.

Add event
IE: element.attachEvent("onclick", func);.
FF: element.addEventListener("click", func, true).
Universal: element.onclick=func. Although the onclick event can be used, the effects of onclick and the above two methods are different. onclick only executes one process, while attachEvent and addEventListener execute a process list, that is, multiple processes. For example: element.attachEvent("onclick", func1);element.attachEvent("onclick", func2) so that both func1 and func2 will be executed.

Here Broken Bridge Canxue once wrote a general function for adding and deleting binding events. You can check out the following article: "JavaScript cross-browser adding and deleting event binding function"

Custom attributes of the tag
IE: If an attribute value is defined for the tag div1, the value can be obtained by div1.value and div1["value"].
FF: Cannot be obtained using div1.value and div1["value"].
General: div1.getAttribute("value").

Parent node, child node and delete node
IE: parentElement, parement.children, element.romoveNode(true).
FF: parentNode, parentNode.childNodes, node.parentNode.removeChild(node).


clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
screenX: The coordinates of the mouse on the display screen.
clientX: The coordinates of the mouse in the page display area.
Note: The above two are common to all browsers. The following are unique methods:

pageX: Unique to FF, the position of the mouse on the page starts from the upper left corner of the page. This can be easily positioned on the entire page. IE has no directly replaced attributes.
Layer If the element has a border, the coordinate origin is at the upper left corner of the border, not the upper left corner of the content area.
offsetX: Unique to IE, the position of the mouse relative to the "element that triggered the event" is positioned from the upper left corner of the content area, not from the upper left corner of the border! This attribute is relatively easy to use. It is very convenient to determine where the mouse point is in an element. FF does not have a direct replacement attribute.
x: Unique to IE, it has the same effect as layerX and can be used as a direct replacement attribute of layerX.
Note: There is a 1px difference in the positioning of IE and FF. In fact, the positioning of IE starts from 0, and the positioning of FF starts from 1. FF will always be 1px larger than IE, and it needs to be processed according to the actual situation.

offsetLeft: This attribute is not an attribute of the event object, but belongs to the DOM object. This attribute indicates that the DOM object is closest to the object in the hierarchical relationship of the DOM object, and the parent of the position is set. "Object" position, although this is said, different browsers have different effects.

The above instructions are strictly followed in FF, but in IE6/7, this property returns the position of the DOM object in its direct parent object, but IE8 corrects this problem, but IE8 has a new The problem is that other browsers start positioning from the upper left corner of the content area of ​​the parent object. IE8 does start positioning from the upper left corner of the border of the parent element. Since the test environment is IE8 in IETester, it cannot be ruled out that it is a problem with IETester.