JavaScript常见火狐FirefoxIE浏览器兼容问题

Posted 2020-10-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript常见火狐FirefoxIE浏览器兼容问题相关的知识，希望对你有一定的参考价值。

1、关于event的用法

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

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

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

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属性。