码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-09-12 15:53:39      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:相对   element   元素属性   ext   text   click   上传   on()   冒泡   

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

  取值操作: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和连续的空格将生效。

  所有浏览器效果统一

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

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

标签:相对   element   元素属性   ext   text   click   上传   on()   冒泡   

原文地址:http://www.cnblogs.com/yanxiaoluo/p/7508983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!