Detailed description of window. Event objects of Firefox and IE

FF's firebug can not only test JS but also check CSS errors, which is commonly used.
But it mainly checks FF errors and is powerless to IE.
To test IE, use ietester, which can test almost all IE versions (1.0 may not be used), and its usage is very convenient.

 

As for JS compatibility with different browsers, there are indeed a lot of considerations. Here is just a part of it. We generally recommend using jquery, prototype, and other compatible script libraries, more importantly, they simplify a lot of operations and provide enhancements that are hard to achieve. You can search for this description.Article.

JS compatible browser FF/ie skills

Javascript will inevitably be used for BS development, and each browser has different support for JavaScript. This requires us Program Compatible with them,
Otherwise, some browsers will not be able to run our Code . The customer's complaint will be created. If the boss knows, this is not very good.
Below are the JS script practices and decomposition that are compatible with IE and FF (some of them are selected from the Internet and sorted by myself). I hope to help you.
In the following example, Internet Explorer is replaced by IE, and mozzila Firefox is replaced by MF/ff.
// Window. Event
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)
Solution: var event = event | window. event;
Example:
<SCRIPT>
Function Test (event ){
VaR event = event | window. event;
// Do something
}
</SCRIPT>
<Input type = "button" value = "click" onclick = "test (event)"/>
// 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.
Solution:
<SCRIPT>
Function Test (event ){
VaR event = event | window. event;
// Or var event = event? Event: window. event; // both can be used. You can also use if Else)
VaR x = event. offsetx | event. layerx;
Var y = event. offsety | event. layery;
// Do something
}
</SCRIPT>
<Div onmousedown = "test (event)"> </div>

// Event. srcelement
Note: In ie, the event object has the srcelement attribute but does not have the target attribute. In Firefox, the even object has the target attribute,
But there is no srcelement attribute.
Solution: Use OBJ (OBJ = event. srcelement? Event. srcelement: event.tar get;) to replace the event. srcelement or
Event.tar get under firefox. pay attention to the event compatibility.
// Event. toelement
Problem:
In ie, the even object has the srcelement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but there is no srcelement.
Sex
Solution:
VaR target = E. relatedtarget | E. toelement;
// Coordinates of X and Y of the tag: style. posleft and style. postop
IE: Yes.
FF: No.
Generic: object. offsetleft and object. offsettop.
// The height and width of the form
IE: Document. Body. offsetwidth and document. Body. offsetheight. Note: The page must have a body tag.
FF: windows.innerwidthand windows.innerhegihtto use document.documentelement.clientwidthand document.doc umentelement. clientheight.
Generic: Document. Body. clientwidth and document. Body. clientheight.
// Add an event
IE: element. attachevent ("onclick", function );.
FF: element. addeventlistener ("click", function, true ).
Generic: element. onclick = function. Although onclick events can all be used, the effects of onclick and the above two methods are different,
Onclick only executes one process, while attachevent and addeventlistener execute one process list, that is, multiple processes. For example, both func1 and func2 are executed in element. attachevent ("onclick", func1); element. attachevent ("onclick", func2.
// Tag Custom Attributes
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 ").
// Document. Form. Item
IE: an existing problem: many statements such as document. formname. Item ("itemname") exist in the existing code and cannot be run in MF.
FF/ie: Document. formname. elements ["elementname"]
// Set/array objects
(1) existing problems:
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by MF.
(2) solution:
Use [] as the subscript operation. For example, change document. Forms ("formname") to document. Forms ["formname"].
For example, change document. getelementsbyname ("inputname") (1) to document. getelementsbyname ("inputname") [1]
// Question about the ID of the HTML object as the object name
(1) Existing Problems
In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in MF.
(2) Solution
Use getelementbyid ("idname") instead of idname as the object variable
// Obtain the object using the idname string
(1) Existing Problems
In IE, eval_r (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in MF.
(2) Solution
Use getelementbyid (idname) instead of eval_r (idname ).
// The variable name is the same as the ID of an HTML Object
(1) Existing Problems
In MF, because the Object ID is not the name of the HTML object, you can use the same variable name as the HTML Object ID, which cannot be used in IE.
(2) Solution
When declaring variables, add VaR to avoid ambiguity, so that it can run normally in IE.
In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors.
// Document. getelementsbyname () and document. All [name] Problems
Existing Problem: in IE, neither getelementsbyname () nor document. All [name] can be used to obtain the DIV element.
(Whether there are other elements that cannot be retrieved ).
// Document. All
Firefox is compatible with document. All, but generates a warning. You can use getelementbyid ("*")
Or getelementbytagname ("*") to replace
However, attributes such as document. All. length are completely incompatible.
// Question about the input. Type attribute
Description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.
// Window. Location. href
Note: in IE or firefox2.0.x, you can use window. Location or window. Location. href; In firefox1.5.x,
Only window. location can be used
Solution: Use window. location to replace window. Location. href.
// Modal and non-modal window Problems
Note: in IE, you can use showmodaldialog and showmodelessdialog to open modal and non-modal windows. In Firefox, you cannot
Solution: Use window. Open (pageurl, name, parameters) to open a new window.
If you want to pass the parameters in the 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.doc ument. getelementbyidx_x ("aqing"). value = "aqing ";
// Frame Problem
The following frame is used as an example:
<Frame src = "xxx.html" mce_src = "xxx.html" id = "frameid" name = "framename"/>
(1) access the frame object:
IE: Use window. frameid or window. framename to access this frame object. frameid and framename can have the same name.
FF: only window. framename can be used to access this frame object.
In addition, both ieand firefoxcan access this frame object by using the upload metadata Doc ument. getelementbyidx_x ("frameid.
(2) Switch frame content:
In both ieand firefox, you can use the upload Doc ument. getelementbyidx_x ("testframe"). src = "xxx.html" or window. framename. Location = "xxx.html" to switch the frame content.
If you need to return the parameters in the frame 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, export your parent.doc ument. form1.filename. value = "aqing ";
// Body
The body of Firefox exists before the body tag is fully read by the browser. The body of IE must exist only after the body tag is fully read by the browser.
// Event Delegate Method
IE: Document. Body. onload = inject; // function inject () has been implemented before this
FF: Document. Body. onload = inject ();
// Difference between the parent element of Firefox and IE
IE: obj. parentelement
FF: obj. parentnode
Solution: because both ff and IE support DOM, using obj. parentnode is a good choice.
// Innertext works properly in IE, but innertext does not work in Firefox. textcontent is required.
// When setting the style of the HTML Tag in Firefox, all the positional and font size values must be followed by PX. This IE is also supported
// Parent node, child node, and delete node
IE: parentelement, parement. Children, element. romovenode (true ).
FF: parentnode, parentnode. childnodes, node. parentnode. removechild (node ).
// Perform operations on the Select Options set
Apart from [], the enumeration element selectname. options. item () is also acceptable, and selectname. options. length, selectname. options. add/Remove can be used in both browsers.
Note that the element is assigned after the add operation. Otherwise, the Operation will fail.
Dynamically delete all options in the SELECT statement:
Document. getelementbyidx_x ("ddlresourcetype"). Options. Length = 0;
Dynamically delete an option in the SELECT statement:
Document. getelementbyidx_x ("ddlresourcetype"). Options. Remove (indx );
Dynamically Add the option in the SELECT statement:
Document. getelementbyidx_x ("ddlresourcetype"). Options. Add (New Option (text, value ));
General methods for ie ff dynamic deletion:
Document. getelementbyidx_x ("ddlresourcetype"). Options [indx] = NULL;
// Capture events
Problem:
FF has no setcapture () or releasecapture () Methods
Solution:
IE:
OBJ. setcapture ();
OBJ. releasecapture ();
FF:
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 the selection of webpage content
Problem:
FF is forbidden by CSS, whereas IE is forbidden by Js.
Solution:
IE: obj. onselectstart = function () {return false ;}
FF:-moz-user-select: none;
// Draw
IE: VML.
FF: SVG.
// Css: transparent
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.
// Css: rounded corner
IE: rounded 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 concave and convex 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 ;.

Back: an error is found, which means that IE can use document. All, but FF cannot. Both IE and FF can use document. getelementsbyname.

MASTER:
// Document. getelementsbyname () and document. All [name] Problems
Existing problems: in IE, getelementsbyname () and document. All [name] cannot be used to obtain DIV elements (whether there are other elements that cannot be retrieved is unknown ).
// Document. All
Firefox is compatible with document. All, but generates a warning. You can use getelementbyid ("*") or getelementbytagname ("*") instead. However, attributes such as document. All. length are completely incompatible.

Here: http://blog.sina.com.cn/s/blog_6fe8363f0100mq26.html