Common browser compatible with IE and Firefox ff JS method (js in IE and Firefox some differences)

It introduces the practice of ie/Firefox compatibility page commonly used on Web pages, and gives the code, quite practical. In order to facilitate people to read the code, the following with IE instead of Internet Explorer, MF/FF instead of Mozzila Firefox. The following is the point of entry:

Window.event
IE: There are window.event objects
FF: No Window.event object. You can pass an event object to a function's arguments. such as Onmousemove=domousemove (event)
Workaround: var event = Event | | Window.event; an example:

<script>function Test (Event) {var event = Event | | window.event;//do something}</script><input type= " Button "value=" click "onclick=" Test (event)/>

Current mouse coordinates
Ie:event.x and Event.y.
FF:event.pageX and Event.pagey.
Generic: Both have Event.clientx and Event.clienty properties.

The current coordinates of the mouse (plus the distance that the scroll bars are rolled over)
IE:event.offsetX and Event.offsety.
FF:event.layerX and Event.layery.
The workaround is still there, see the following code:

<script>function Test (Event) {var event = Event | | window.event;//or var event = event? event:window.event;//the 2 Yes, or you can use the if else (this shorthand) var x = Event.offsetx | | Event.layerx;var y = event.offsety | | Event.layery;//do something}</script><div onmousedown= "Test (event)" ></div>

Event.srcelement problems
Description: Under IE, the event object has a srcelement attribute, but no target attribute; Under Firefox, the even object has the target property,
However, there is no srcelement attribute.
Workaround: Use obj (obj = event.srcelement? event.srcElement:event.target;)
To replace the event.srcelement under IE or
Event.target in Firefox. Please also note the compatibility of the event.

Event.toelement problems
The even object under IE has a srcelement attribute, but no target attribute;
The even object has the target property under Firefox, but there is no srcelement property
My workaround:
var target = E.relatedtarget | | E.toelement;

coordinates of X and y of the label: Style.posleft and Style.postop
IE: there is.
FF: No.
General: Object.offsetleft and Object.offsettop.

The height and width of the form
IE:document.body.offsetWidth and Document.body.offsetHeight. Note: This page must have a body tag.
FF:window.innerWidth and Window.innerhegiht,
As well as Document.documentElement.clientWidth and document.documentElement.clientHeight.
General: Document.body.clientWidth and Document.body.clientHeight.

Add Event
IE:element.attachEvent ("onclick", function);.
FF:element.addEventListener ("Click", Function, True).
General: Element.onclick=function. Although you can use the OnClick event, the effect of the onclick and the above two methods is different,
The onclick only executes a procedure, while Attachevent and AddEventListener perform a list of processes, which is a process.
For example: Element.attachevent ("onclick", func1);
Element.attachevent ("onclick", Func2) such func1 and FUNC2 will be executed.

Custom Properties for labels
IE: If you define a property value for the tag div1, you can div1.value and div1["value" to get the value.
FF: cannot be taken with Div1.value and div1["value").
Generic: Div1.getattribute ("value").

Document.form.item problems
IE: Existing problem: There are many Document.formName.item ("itemname") statements in existing code that cannot be run in MF
ff/ie:document.formname.elements["ElementName"]

Collection/Array Class object issues
(1) Existing problems:
Many collection class objects in existing code use (), IE can accept, MF cannot.
(2) Workaround:
Instead, use [] as the subscript operation. such as: Document.forms ("FormName") changed to document.forms["FormName"].
Another example: Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]

An issue with the ID of an HTML object as an object name
In IE, the ID of an HTML object can be used directly as a subordinate object variable name for document. Not in MF.
Workaround: Use getElementById ("Idname") instead of Idname as an object variable

Problem with Idname string to get Object
In IE, an HTML object with an ID of idname can be obtained using eval (idname), which cannot be in MF.
Workaround: Use getElementById (idname) instead of eval (idname).

Problem with the same variable name as an HTML object ID
In MF, because the object ID is not the name of an HTML object, you can use the same variable name as the HTML object ID, which is not available in IE.
WORKAROUND: When declaring variables, add var to avoid ambiguity, so that in IE can run normally. In addition, it is best not to use the same variable name as the HTML object ID to reduce errors.

Questions of Document.getelementsbyname () and Document.all[name]
Existing problem: In IE, Getelementsbyname (), Document.all[name] cannot be used to obtain DIV elements.
(if there are other elements that cannot be taken, it is not known yet).
document.all
Firefox can be compatible with document.all, but generates a warning. can use getElementById ("*")
or Getelementbytagname ("*") instead, but for properties such as Document.all.length, it is completely incompatible.

Input.type Property Issues
Description: The Input.type property under IE is read-only, but the Input.type property in Firefox reads and writes

Window.location.href problems
Description: Under IE or firefox2.0.x, you can use window.location or window.location.href; Under the firefox1.5.x,
Only use window.location
WORKAROUND: Use window.location instead of window.location.href

Modal and non-modal window problems
Description: Under IE, the modal and non-modal windows can be opened by ShowModalDialog and showModelessDialog; Firefox is not
WORKAROUND: Open a new window directly using window.open (pageurl,name,parameters).
If you need to pass parameters from a child window back to the parent window, you can use Window.opener in the child window to access the parent window.
For example: var parwin = Window.opener; ParWin.document.getElementById ("aqing"). Value = "aqing";

Body Problem
The body of Firefox exists before the body tag is fully read by the browser, and the body of IE must be fully loaded by the browser before the body tag is present.

Event Delegate Method
IE:document.body.onload = inject; Function inject () has been implemented prior to this
FF:document.body.onload = inject ();

The difference between Firefox and IE's parent element (parentelement)
IE:obj.parentElement
FF:obj.parentNode
WORKAROUND: Because both FF and IE support DOM, using Obj.parentnode is a good choice

InnerText in IE can work normally, but innertext in Firefox but not. Requires textcontent
When you set the style of an HTML tag in Firefox, all positional and font size values must be followed by PX. This IE is also supported by

Parent node, child node, and delete node
Ie:parentelement, Parement.children,element.romovenode (true).
Ff:parentnode, Parentnode.childnodes,node.parentnode.removechild (node).
Options collection Operations on select
Enumeration elements except [], SelectName.options.item () is also possible, in addition to SelectName.options.length,
Selectname.options.add/remove can be used on both browsers.
Note the element is assigned after add, otherwise it will fail
To dynamically delete all options in select:
document.getElementById ("Ddlresourcetype"). options.length=0;
To dynamically delete an item in Select option:
document.getElementById ("Ddlresourcetype"). Options.remove (indx);
To dynamically add an item in a SELECT option:
document.getElementById ("Ddlresourcetype"). Options.add (New Option (Text,value));
IE FF Dynamic Delete general method:
document.getElementById ("Ddlresourcetype"). Options[indx] = null;

Capturing events
Problems that you have encountered:
FF has no setcapture (), ReleaseCapture () method
How to solve in IE:
Obj.setcapture ();
Obj.releasecapture ();
Solutions in FF Firefox:

Window.captureevents (event.mousemove| Event.mouseup); Window.releaseevents (event.mousemove| Event.mouseup); if (!window.captureevents) {o.setcapture ();} else {window.captureevents (event.mousemove| Event.mouseup);} if (!window.captureevents) {o.releasecapture ();} else {window.releaseevents (event.mousemove| Event.mouseup);}

Prevent page content from being selected
FF need to use CSS to prohibit, ie with JS Forbidden
Workaround:
IE:obj.onselectstart = function () {return false;}
FF:-moz-user-select:none;
Drawing
Ie:vml
Ff:svg