JavaScript常见火狐Firefox、IE浏览器兼容问题

1、关于event的用法

IE 中可以直接使用 event 对象，而 FF 中则不可以

解决方法一：
var theEvent = window.event || arguments.callee.caller.arguments[0];

解决方法二：是将 event 作为参数来传递
function xxx(ev){var oEvent = event || ev;}

 

2、事件对象获取

IE：event.srcElement

Mozilla：event.target

Mozilla下的e.target相当于ie下的event.srcElement

但细节上有区别

IE 中 srcElement 表示产生事件的源，比如是哪个按钮触发的 onclick 事件，返回一个Html Element   

FF 中则是 target，返回的是个节点，也就是说包括文本节点

 

3、键盘值的取得

Mozilla：event.which

IE：event.keyCode

 

4、取鼠标点击的绝对位置

IE：event.x、event.y

Mozilla：event.pageX、event.pageY

 

5、取鼠标点击的相对位置

IE：event.offsetX、event.offsetY

Mozilla：event.pageX、event.pageY

 

6、事件绑定

IE：attachEvent、detatchEvent   

Mozilla：addEventListener、removeEventListener

7、事件冒泡、事件捕获、默认事件

这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

<div id="outer">

    <p id="inner">Click me!</p>

</div>

事件冒泡(event bubbling)：微软——事件会从最内层的元素开始发生，一直向上传播，直到document对象，p -> div -> body -> html -> document

事件捕获(event capturing)：网景——与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素，document -> html -> body -> div -> p

 

阻止事件冒泡、捕获的方法：e.stopPropagation();

阻止默认事件发生的方法：e.preventDefault();

 

addEventListener默认false冒泡事件，true捕获事件

 

阻止事件冒泡：

在微软的模型中，你必须设置事件的cancelBubble的属性为true

window.event.cancelBubble = true

在w3c模型中，你必须调用事件的stopPropagation()方法

e.stopPropagation()

 

兼容解决方法：

function doSomething(e)

{

 

   

 

        if (!e)

{

        var e = window.event;

        e.cancelBubble = true;

        }

 

   

        if (e.stopPropagation){

        e.stopPropagation();

        }

}

 

8、获取元素属性getAttribute

在Firefox中getAttribute(“onsubmit”)返回值是一个字符串，也就是一个函数，因此如果在IE中处理onsubmit，我们可以直接调用这个函数

在IE中的返回值类型则是function，因此就不能直接这样使用了，而应该将字符串转换成函数再去调用，使用new Function将字符串转换成函数

var vaf = new Function(document.getElementById(“test”).getAttribute(“onsubmit”));

兼容解决方法：

function validate() {
        var vaf=document.getElementById(“test”).getAttribute(“onsubmit”);
        vaf = typeof(vaf) == ”string” ? new Function(vaf) : vaf;
        if(vaf())
            alert(“OK”);
        else
            alert(“Error”);
    }

 

DOM篇

1、删除节点
IE：removeNode

例：<input type="button" value="clickMe" id="myButton">

document.getElementById("myButton").removeNode()

Mozilla中，没有这个方法，只能是先找到父节点，然后调用Dom方法removeChild才可以达到目的

例：<input type="button" value="clickMe" id="myButton">

var Node = document.getElementById("myButton");

oNode.parentNode.removeChild(oNode);

 

2、关于innerHTML和innerText

innerText：

 浏览器支持：IE、Chrome

  赋值操作：先将ASCII实体对应的字符（<、>、&、'和"）转换为实体名，然后把处理后的值赋予给innerHTML属性。

  取值操作：innerText的取值实际上就是对innerHTML的属性值进行一系列处理，然后返回，具体步骤如下

         1. 对HTML标签进行解析；

         2. 对CSS样式进行带限制的解析和渲染；

         3. 将ASCII实体转换为对应的字符；

         4. 剔除格式信息（如\t \r和\n等），将多个连续的空格合并为一个。

浏览器效果并不统一

 

textContent：　　　　　　　　　　　　　

  浏览器支持：IE9~11、FireForx、Chrome

  赋值操作：先将ASCII实体对应的字符（<、>、&、'和"）转换为实体名，然后把处理后的值赋予给innerHTML属性。

  取值操作：textContent的取值实际上就是对innerHTML的属性值进行一系列处理，然后返回，具体步骤如下

        1. 对HTML标签进行剔除；

        2. 将ASCII实体转换为相应的字符。

       注意：

            a). 对HTML标签是剔除不是解析，也不会出现CSS解析和渲染的处理，因此<br/>等元素是不生效的。

            b). 不会剔除格式信息和合并连续的空格，因此\t、\r、\n和连续的空格将生效。

  所有浏览器效果统一

（上述的关系和行为仅限于非表单元素）

 

3、获取scrollTop、clientWidth、clientHeight

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop

var clientWidth = document.body.clientWidth || document.documentElement.clientWidth

var clientHeight = document.body.clientHeight || document.documentElement.clientHeight

 

4、获取首尾子节点

IE：firstChild、lastChild

Firefox：firstElementChild、lastElementChild

兼容写法：

var oFirst = element.firstChild || element.firstElementChild

 

5、获取兄弟节点

IE：nextSibling、previousSibling

Firefox：nextElementSibling、previousElementSibling

兼容写法：

var oNext = element.nextSibling || element.previousSibling

转载于:https://www.cnblogs.com/yanxiaoluo/p/7508983.html