Summary of compatibility between IE and Firefox in Javascript

Window. event object difference
IE: window. event object
FF: There is no window. event object. You can pass the event object to the function parameters. For example, onmousemove = doMouseMove (event)

Obtains the current mouse coordinate.
IE: event. x and event. y.
FF: event. pageX and event. pageY.
Generic: both have the event. clientX and event. clientY attributes.

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

Coordinates of tag x and y: style. posLeft and style. posTop
IE: Yes.
FF: No.
Generic: object. offsetLeft and object. offsetTop.


Obtain the height and width of the form.
IE: document. body. offsetWidth and document. body. offsetHeight. Note: The page must have a body tag.
FF: always specify innerwidthand always specify innerhegihtto use document.documentelement.clientwidthand document.doc umentElement. clientHeight.
Generic: document. body. clientWidth and document. body. clientHeight.

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

Here, we have written a general function for adding and deleting binding events. You can refer to the following article: Adding and deleting event binding functions across browsers in JavaScript

Custom Attributes of tags
IE: If you define an attribute value for the label div1, you can obtain this value using div1.value and div1 ["value.
FF: div1.value and div1 ["value"] cannot be used.
General purpose: 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: coordinates of the mouse on the screen.
ClientX: coordinates of the area displayed by the mouse on the page.
Note: The above two are common to all browsers. The following are specific methods:

PageX: FF is unique. The cursor position on the page is located from the upper left corner of the page. This can be easily located on the entire page. IE has no direct replacement attribute.
LayerX: FF exclusive. The cursor is the position of the boundary of "parent element of position" relative to the "closest to this element in the hierarchy of elements that trigger the event, start from the upper left corner of the border, that is, if the parent element has a border, the coordinate origin is located in the upper left corner of the border, instead of the upper left corner of the content area.
OffsetX: exclusive to IE. the cursor is located from the upper left corner of the content area, not from the upper left corner of border, relative to the position of the trigger event element! This attribute is easy to use and is used to determine where the mouse points are in an element. FF does not directly replace the attribute.
X: exclusive to IE, which has the same effect as layerX and can be directly replaced by layerX.
Note: There is a 1px difference between IE and FF positioning. In fact, IE positioning starts from 0, FF positioning starts from 1, and FF is always 1px larger than IE positioning, it must be handled according to the actual situation.

OffsetLeft: This attribute is not the property 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, the position in "parent object" is set. Although this is the case, different browsers have different effects.

FF strictly follows the preceding instructions. However, in IE6/7, this attribute returns the position of the DOM object in its direct parent object. However, IE8 corrected this problem, however, IE8 has another new problem. other browsers are located from the upper left corner of the content area of the parent object. IE8 is located from the upper left corner of the border of the parent element, the IETester problem cannot be ruled out because the test environment is IE8 in IETester.