/* below IE instead of Internet Explorer to Mf/ff instead of Mozzila Firefox * *
Window.event
IE: There are window.event objects
FF: No Window.event object. You can pass an event object to a parameter of a function. such as Onmousemove=domousemove (event)
Workaround: var event = Event | | window.event;
Example
Copy Code code as follows:
<script>
function test (event) {
var event = Event | | window.event;
Do something
}
</script>
<input type= "button" value= "click" onclick= "Test (event)"/>
Mouse Current coordinates
Ie:event.x and Event.y.
FF:event.pageX and Event.pagey.
General: Both have Event.clientx and Event.clienty attributes.
The current coordinates of the mouse (plus the distance the scroll bar rolls over)
IE:event.offsetX and Event.offsety.
FF:event.layerX and Event.layery.
Workaround:
Copy Code code as follows:
<script>
function test (event) {
var event = Event | | window.event;
or var event = event? event:window.event;//can be in this 2, or you can use if else (this shorthand)
var x = Event.offsetx | | Event.layerx;
var y = event.offsety | | Event.layery;
Do something
}
</script>
<div onmousedown= "Test (event)" ></div>
/** other compatible solutions are similar, no more than one by one examples **/
Event.srcelement problem
Note: Under IE, the event object has srcelement attribute, but there is no target attribute; Firefox, the even object has the target attribute,
However, there is no srcelement attribute.
Workaround: Use obj (obj = event.srcelement? event.srcElement:event.target;)
To replace the event.srcelement under IE or
Firefox under the Event.target. Please also note the compatibility issue of event.
Event.toelement problem
Problem:
Under IE, the even object has a srcelement attribute, but no target attribute;
Firefox, the even object has the target attribute, but there is no srcelement property
Workaround:
var target = E.relatedtarget | | E.toelement;
Coordinates of the x and Y of the label: Style.posleft and Style.postop
IE: there is.
FF: No.
General: Object.offsetleft and Object.offsettop.
Height and width of the form
IE:document.body.offsetWidth and Document.body.offsetHeight. Note: The page must have a body tag at this point.
FF:window.innerWidth and Window.innerhegiht,
As well as Document.documentElement.clientWidth and document.documentElement.clientHeight.
General: Document.body.clientWidth and Document.body.clientHeight.
Adding events
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 not the same,
OnClick only executes a process, and attachevent and AddEventListener execute a list of processes, that is, multiple processes.
For example: Element.attachevent ("onclick", func1);
Element.attachevent ("onclick", Func2) so func1 and Func2 will be executed.
Custom Properties for labels
IE: If a property value is defined for the label DIV1, the value can be obtained Div1.value and div1["value".
FF: cannot be taken with Div1.value and div1["value".
General: Div1.getattribute ("value").
Document.form.item problem
IE: Existing problem: There are many Document.formName.item ("itemname") statements in existing code that cannot be run under MF
ff/ie:document.formname.elements["ElementName"]
Set/Array Class object problem
(1) Existing problems:
Many collection class objects in existing code use (), IE can accept, MF cannot.
(2) Solution:
Use [] as the subscript operation instead. For example: Document.forms ("FormName") changed to document.forms["FormName"].
Also as follows: Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]
An issue with the ID of an HTML object as an object name
(1) Existing problems
In IE, the ID of an HTML object can be used directly as the subordinate object variable name of document. Not in MF.
(2) Solving method
Use getElementById ("Idname") instead of Idname as an object variable
Problem with Idname string to get objects
(1) Existing problems
In IE, you can use Eval (idname) to obtain an HTML object with an ID of idname, which cannot be in MF.
(2) Solving method
Replace eval (idname) with getElementById (Idname).
Problem with the same variable name as an HTML object ID
(1) Existing problems
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.
(2) Solving method
In the declaration of variables, all add Var, to avoid ambiguity, so that in IE can also be normal operation.
In addition, it is best not to take variable names that are the same as the HTML object IDs to reduce errors.
Document.getelementsbyname () and document.all[name] problems
Existing problem: In IE, Getelementsbyname (), Document.all[name] can not be used to obtain DIV elements
(whether there are other elements that cannot be taken is unknown).
document.all
Firefox can be compatible with document.all, but generates a warning. can use getElementById ("*")
or Getelementbytagname ("*") to replace
However, for attributes such as document.all.length, they are completely incompatible
Input.type Property Problem
Note: IE under the Input.type property is read-only; but Firefox under the Input.type property is read-write
Window.location.href problem
Description: Under IE or firefox2.0.x, you can use window.location or window.location.href; Under firefox1.5.x,
Only use window.location
Workaround: Use window.location to replace Window.location.href
Modal and non-modal window problems
Note: Under IE, modal and modeless windows can be opened by ShowModalDialog and showModelessDialog. Firefox is not
WORKAROUND: Open the new window directly using the window.open (Pageurl,name,parameters) method.
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";
Frame problem
Take the following frame as an example:
<frame src= "xxx.html" mce_src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Access to the Frame object:
IE: Use Window.frameid or window.framename to access this frame object. Frameid and FrameName can have the same name.
FF: This frame object can only be accessed using Window.framename.
In addition, Window.document.getElementById ("Frameid") can be used in IE and Firefox to access this frame object.
(2) Switch frame content:
Window.document.getElementById ("Testframe") can be used in both IE and Firefox. src = "xxx.html"
or window.frameName.location = "xxx.html" to toggle the contents of the frame.
If you need to pass parameters in a frame back to the parent window (note that it is not opener, but parent frame), you can use parent in frme to access the parent window.
For example: window.parent.document.form1.filename.value= "aqing";
Body Problem
The body of Firefox exists before the body tag is fully read into the browser, and IE's body must be fully read by the browser before the body tag is present.
Event Delegate Method
IE:document.body.onload = inject; Function inject () was 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, but innertext in Firefox but not. Required Textcontent
When you set the HTML tag style in Firefox, all positional and font dimensions 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).
Operations on the options collection for select
Enumeration elements can be SelectName.options.item () in addition to [], and SelectName.options.length,
Selectname.options.add/remove can be used on both browsers.
Note the assignment element after add, or it will fail
To delete all options in a select dynamically:
document.getElementById ("Ddlresourcetype"). options.length=0;
To delete an option in a select dynamically:
document.getElementById ("Ddlresourcetype"). Options.remove (indx);
Dynamically add items in Select option:
document.getElementById ("Ddlresourcetype"). Options.add (New Option (Text,value));
IE FF Dynamic Deletion common method:
document.getElementById ("Ddlresourcetype"). Options[indx] = null;
Capturing events
Problem:
FF no setcapture (), ReleaseCapture () method
Workaround:
Ie:
Copy Code code as follows:
Obj.setcapture ();
Obj.releasecapture ();
Ff:
Copy Code code as follows:
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);
}
Prohibit selection of Web page content
Problem:
FF need to use CSS prohibit, ie with JS prohibit
Workaround:
IE:obj.onselectstart = function () {return false;}
FF:-moz-user-select:none;
Drawing
Ie:vml.
Ff:svg.
CSS: Transparent
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
CSS: Rounded Corners
IE: Round corners are not supported.
FF:-MOZ-BORDER-RADIUS:4PX, or-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;.
CSS: Double-line beveled border
IE:BORDER:2PX outset;
Ff:-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 White;
-moz-border-right-colors: #404040 #808080;-moz-border-bottom-colors: #404040 #808080;
