Js differences in IE and firefox

2. Prohibit the selection of web content:
In IE, js: obj.onselectstart=function(){return false; }
In firefox with CSS: - moz - user - select: none

4. Capture events:
IE: obj.setCapture(), obj.release release ()
Firefox: document. AddEventListener (" mousemove ", mousemovefunction, true);
Document. The removeEventListener (" mousemove ", mousemovefunction, true);

5. Get the mouse position:
IE: event. ClientX, event. ClientY
Firefox: requires the event function to pass the event object
Obj. Onmousemove = function (ev) {
        X = ev. PageX; Y = ev. PageY;
}

6. Boundary problems of DIV and other elements:
For example, set the CSS of a div: : {width:100px; Height: 100 px; 1 px solid border: # 000000; }
In IE: width of div (including border width) : 100px, height of div (including border width) : 100px;
Firefox: div width (including border width) : 102px, div height (including border width) : 102px;

So when you do this drag window that is compatible with Internet explorer and firefox, you have to think a little bit about how you write js and CSS, and here are two tips

  1. Document. FormName. Item (" itemName ")
Problem description: Internet explorer, you can use the document. The formName. Item (" itemName ") or the document. The formName. Elements (" elementName "); Firefox, can only use the document. The formName. Elements (" elementName ").
Solution: use unified document. FormName. Elements (" elementName ").

2. Collection class object problem
Under IE, you can use () or [] to get the collection class object; Under Firefox, you can only use [] to get collection class objects.
Solution: uniformly use [] to get collection class objects.

3. Custom attribute problems
Problem description: under IE, you can use the method of obtaining general attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes. Under Firefox, you can only get custom attributes using getAttribute().
Solution: get custom attributes uniformly through getAttribute().

4. Eval (" idName ")
Under IE, you can use eval("idName") or getElementById("idName") to get an HTML object with an id of idName. Under Firefox, you can only use getElementById("idName") to get an HTML object with an id of idName.
Solution: use getElementById("idName") to get HTML objects with id idName.

5. The problem that the variable name is the same as an HTML object ID
Problem description: under IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document, but not under Firefox. Under Firefox, you can use the same variable name as the HTML object ID, but not under IE.
Solution: use document.getelementbyid ("idName") instead of document.idname. It is best not to take the same HTML object ID variable name, in order to reduce errors; When declaring variables, always add the var keyword to avoid ambiguity.

6. The problem of const
In Firefox, you can use the const keyword or var keyword to define constants. Under IE, you can only use the var keyword to define constants.
Solution: use the var keyword to define constants uniformly.

7. Input.type attribute problem
Problem description: the input.type attribute under IE is read-only; But the input.type property under Firefox is read and write.
            Solution: do not modify the input.type property. If you have to change it, you can hide the original input and insert a new input element in the same place.

8. The window. The problem of the event
Window.event can only run under IE, not Firefox, because Firefox's events can only be used in the event scene.
Solution: add the event parameter to the function where the event occurs, and use var myEvent = evt? in the function body (assuming the parameter is evt). Evt: (window. The event & # 63; Window. The event: null)
            Example:

<input type="button" onclick="doSomething(event)"/> 

<script language="javascript"> 

function doSomething(evt) { 

var myEvent = evt?evt:(window.event?window.event:null)

... 

}

            9. Event.x and event.y
Under IE, the even object has x and y attributes, but no pageX and pageY attributes. Under Firefox, the even object has pageX and pageY properties, but no x or y properties.
Solution: var myX = event.x ? Event. X: event. PageX; Var myY = event.y ? Event. Y: event. PageY;
            If you consider item 8, use myEvent instead of event.

10. The event. The problem of srcElement
Under IE, the even object has a srcElement attribute, but no target attribute. Under Firefox, the even object has a target attribute, but no srcElement attribute.
Solution: use srcObj = event.srcElement ? Event. SrcElement: event. The target;
            If you consider item 8, use myEvent instead of event.

11. The window. The location. The problem of href
In IE or firefox 2.0.x, you can use window.location or window.location.href; In firefox 1.5.x, you can only use window.location.
Solution: use window.location instead of window.location.href. Of course, you can also consider using the location.replace() method.

12. Modal and modeless window problems
Under IE, the modal and non-modal Windows can be opened through showModalDialog and showModelessDialog. Firefox does not.
Solution: directly use window.open(pageURL,name,parameters) to open a new window.
            If you need to pass arguments from the child window back to the parent window, you can use window.opener in the child window to access the parent window. Var subWindow = window.open(pageURL,name,parameters); To get the newly opened window object.

13. Frame and iframe issues
The following frame is an example:
< Frame SRC ="xxx. HTML "id="frameId" name="frameName" />
(1) access the frame object
IE: use window.frameid or window.framename to access the frame object;
Firefox: use window.framename to access the frame object;
            Solution: use unified window. The document. The getElementById (" frameId ") to access the object frame;

(2) switch the frame content
Can be used in Internet explorer and Firefox window. The document. The getElementById (" frameId "). The SRC = "XXX. HTML" or Windows. FrameName. Location = "XXX. HTML" to switch the content of the frame;
If you need to pass arguments from the frame back to the parent window, you can access the parent window in the frame using the parent keyword.

14. Body loading problem
Note: Firefox's body object exists before the body tag is fully read by the browser. IE's body object does not exist until the body tag has been read by the browser.
            [note] this problem has not been actually verified and will be modified after verification.
            Note: it is verified that IE6, Opera9, and FireFox2 do not have the above problems, and a simple JS script can access all the objects and elements that have been loaded before the script, even if the element has not been loaded yet.

15. The event delegate method
Under IE, use document.body.onload = inject; Function inject() has been implemented before; Under Firefox, use document.body.onload = inject();
Document.body.onload =new Function('inject()'); Document.body.onload = function(){}
            Note the difference between a Function and a Function

18. The innerText question.
            Note: innerText works fine in IE, but not in FireFox.
            Solution: use textContent instead of innerText in non-internet explorer browsers.
            Example:

if(navigator.appName.indexOf("Explorer") >-1){ 

document.getElementById('element').innerText = "my text"; 

} else{ 

document.getElementById('element').textContent = "my text"; 

} 

19. Assignment of object width and height
Note: an invalid statement like obj. style-height = imgobj.height in FireFox.
            Solution: use obj.style.height = imgobj.height + 'px';

20. Table operation problems
            Note: ie, firefox, and other browsers all operate differently on the table TAB. The innerHTML of the table and tr are not allowed in ie, and the appendChild method does not work when adding a tr with js.
Solutions:

//Append a blank line to the table: 

var row = otable.insertRow(-1); 

var cell = document.createElement("td"); 

cell.innerHTML = ""; 

cell.className = "XXXX"; 

row.appendChild(cell); 

            Note: since I rarely use JS to manipulate tables directly, this problem has not been encountered. It is recommended to use JS framesets to manipulate tables, such as JQuery.

21. Ul and ol list indentation problem
To remove the indentation of ul, ol, etc., the style should be written as: list-style:none; Margin: 0 px; Padding: 0 px;
Margin is valid for IE and padding is valid for FireFox. please this sentence is wrong, see left for details
            [note] this problem has not been actually verified and will be modified after verification.
            [note] prove that in IE, margin:0px removes the top, bottom, left, right indents, margins, and list Numbers or dots. In Firefox, margin:0px only removes the top and bottom margins, padding:0px only removes the left and right indentation, and you must set list-style:none to remove list Numbers or dots. In other words, in IE, you just set margin:0px for the final effect, while in Firefox you have to set margin:0px, padding:0px, and list-style:none.

22. CSS transparency issues
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60).
FF: opacity: 0.6.
            [note] the best two are written, and opacity properties in the following.