★★★常用的【兼容IE和火狐FF】等浏览器的js方法★★★★★★★★

这是一篇收集的文档,介绍了网页上常用的IE/火狐兼容性该页的做法,并给出了代码,相当实用了。为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox 。

以下进入正题:

一、window.event
IE:有window.event对象
FF:没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
解决方法:var event = event || window.event;一个示例:

<script>
function test(event) {
var event = event || window.event;
//do Something
}
</script>
<input type="button" value="click" οnclick="test(event)"/>

二、鼠标当前坐标
IE:event.x和event.y。
FF:event.pageX和event.pageY。
通用:两者都有event.clientX和event.clientY属性。

三、鼠标当前坐标(加上滚动条滚过的距离)
IE:event.offsetX和event.offsetY。
FF:event.layerX和event.layerY。
解决方法还是有的,请看下面的代码:

<script>
function test(event) {
var event = event || window.event;
//or var event = event ? event : window.event;//这2中都可以,也可以用if else(这简写)
var x = event.offsetX || event.layerX;
var y = event.offsetY || event.layerY;
//do Something
}
</script>
<div οnmοusedοwn="test(event)"></div>

四、event.srcElement问题
说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,
但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)
来代替IE下的event.srcElement或者
Firefox下的event.target. 请同时注意event的兼容性问题。

五、event.toElement问题
IE下even对象有srcElement属性,但是没有target属性;
Firefox下even对象有target属性,但是没有srcElement属性
我的解决方法:
var target = e.relatedTarget || e.toElement;

六、标签的x和y的坐标位置:style.posLeft 和 style.posTop
IE:有。
FF:没有。
通用:object.offsetLeft 和 object.offsetTop。

七、窗体的高度和宽度
IE:document.body.offsetWidth和document.body.offsetHeight。注意:此时页面一定要有body标签。
FF:window.innerWidth和window.innerHegiht,
以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用:document.body.clientWidth和document.body.clientHeight。

八、添加事件
IE:element.attachEvent("onclick", function);。
FF:element.addEventListener("click", function, true)。
通 用:element.οnclick=function。虽然都可以使用onclick事件,但是onclick和上面两种方法的效果是不一样的,
onclick 只有执行一个过程,而attachEvent和addEventListener执行的是一个过程列表,也就是多个过程。
例如:element.attachEvent("onclick", func1);
element.attachEvent("onclick", func2)这样func1和func2都会被执行。

九、标签的自定义属性
IE:如果给标签div1定义了一个属性value,可以div1.value和div1["value"]取得该值。
FF:不能用div1.value和div1["value"]取。
通用:div1.getAttribute("value")。

十、document.form.item 问题
IE:现有问题:现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行
FF/IE: document.formName.elements["elementName"]

十一、集合/数组类对象问题
(1)现有问题:
现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能。
(2)解决方法:
改用 [] 作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]。
又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

十二、HTML 对象的 id 作为对象名的问题
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
解决方法:用 getElementById("idName") 代替 idName 作为对象变量使用

十三、用idName字符串取得对象的问题
在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
解决方法:用 getElementById(idName) 代替 eval(idName)。

十四、变量名与某 HTML 对象 id 相同的问题
在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
解决方法:在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。此外,最好不要使用与 HTML 对象 id 相同的变量名,以减少错误。

十五、document.getElementsByName() 和 document.all[name] 的问题
现有问题:在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素。
(是否还有其它不能取的元素还不知道)。

十六、document.all
Firefox可以兼容document.all, 但会生成一条警告。可以用getElementById("*")
或者 getElementByTagName("*")来代替,不过对于document.all.length等属性,则完全不兼容。

十七、input.type属性问题
说明:IE下input.type属性为只读;

但是Firefox下input.type属性为读写

十八、window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,
只能使用window.location
解决方法:使用window.location来代替window.location.href

十九、模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

二十、body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全载入之后才存在。

二十一、事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
FF:document.body.onload = inject();

二十二、firefox与IE的父元素(parentElement)的区别
IE:obj.parentElement
FF:obj.parentNode
解决方法: 因为FF与IE都支持DOM,因此使用obj.parentNode是不错选择

二十三、innerText在IE中能正常工作,但是innerText在FireFox中却不行. 需用textContent

二十四、FireFox中设置HTML标签的style时,所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的

二十五、父节点、子节点和删除节点
IE:parentElement、parement.children,element.romoveNode(true)。
FF:parentNode、parentNode.childNodes,node.parentNode.removeChild(node)。

二十六、对select的options集合操作
枚举元素除了[]外,SelectName.options.item()也是可以的, 另外SelectName.options.length,
SelectName.options.add/remove都可以在两种浏览器上使用。
注意在add后赋值元素,否则会失败
动态删除select中的所有options:
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某一项option:
document.getElementById("ddlResourceType").options.remove(indx);
动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
IE FF 动态删除通用方法:
document.getElementById("ddlResourceType").options[indx] = null;

二十七、捕获事件
曾经遇到的问题:
FF没有setCapture()、releaseCapture()方法
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);
}

二十八、禁止选取网页内容
FF需要用CSS禁止,IE用JS禁止
解决方法:
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

 

二十九、画图
IE:VML
FF:SVG

转载于:https://www.cnblogs.com/shimily/articles/4599791.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431649.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

英语答题测试的软件叫什么,英语做题软件哪个好 有答案解析的英语做题软件分享...

对于一些即将参与重要英语考试的考生来说&#xff0c;每天刷题练习肯定是不可避免的事情&#xff0c;但如果你想要更高效的刷题&#xff0c;让自己的刷题时间更有价值&#xff0c;那就来看看推荐给你的这些英语做题软件。类型&#xff1a;学习 语言&#xff1a;简体中文星级&am…

raid卡组不同raid_RAID磁盘阵列是如何运作的?

本文编辑&#xff1a;意哥专业指导&#xff1a;葵芳一凡 RAID是英文Redundant Array of Independent Disks的缩写&#xff0c;中文简称为独立冗余磁盘阵列。简单的说&#xff0c;RAID是一种把多块独立的硬盘&#xff08;物理硬盘&#xff09;按不同的方式组合起来形成一个硬盘组…

java 析构函数_C++虚函数

码字不易&#xff0c;欢迎给个赞&#xff01;C虚函数是多态性实现的重要方式&#xff0c;当某个虚函数通过指针或者引用调用时&#xff0c;编译器产生的代码直到运行时才能确定到底调用哪个版本的函数。被调用的函数是与绑定到指针或者引用上的对象的动态类型相匹配的那个。因此…

.net中使用XPath语言在xml中判断是否存在节点值的方法

book.xml<?xml version"1.0" encoding"utf-8" ?> <bookstore><book category"COOKING"><title lang"en">Everyday Italian</title><author>Giada De Laurentiis</author><year>200…

象过河软件试用版_比肩许银川蒋川王天一,象棋软件下出神一样的残局,看完叹为观止...

古语有云&#xff0c;残局&#xff0c;是一盘棋的命脉所在。这对于现代象棋而言&#xff0c;也是如此&#xff0c;君不见&#xff0c;许银川有着鬼魅残功&#xff0c;蒋川有着魔衣血刀&#xff0c;王天一有着天外飞仙&#xff0c;都是一等一的残棋神器。而被誉为棋界战斗力最为…

python爬取小说出现乱码_详解Python解决抓取内容乱码问题(decode和encode解码)

一、乱码问题描述 经常在爬虫或者一些操作的时候&#xff0c;经常会出现中文乱码等问题&#xff0c;如下原因是源网页编码和爬取下来后的编码格式不一致 二、利用encode与decode解决乱码问题 字符串在Python内部的表示是unicode编码&#xff0c;在做编码转换时&#xff0c;通常…

daatable动态创建

方法一: DataTable tblDatas new DataTable("Datas");DataColumn dc null;dc tblDatas.Columns.Add("ID", Type.GetType("System.Int32"));dc.AutoIncrement true;//自动增加dc.AutoIncrementSeed 1;//起始为1dc.AutoIncrementStep 1;//步…

北方股份无人驾驶矿卡_踏歌智行完成B轮2亿元融资,无人驾驶矿山赛道爆发在即...

作者 / 李笠10 月 30 日&#xff0c;矿山无人驾驶运输的领军企业踏歌智行完成了 2 亿元 B 轮融资。这是无人驾驶矿山赛道迄今为止最大的一笔融资。据悉&#xff0c;本轮融资由前海母基金和宝通投资共同领投&#xff0c;清研资本、蓝焱资本等跟投。这也是踏歌智行继 2019 年连续…

计算机视觉子方向,计算机视觉方向简介 | 人脸识别中的活体检测算法综述

原标题&#xff1a;计算机视觉方向简介 | 人脸识别中的活体检测算法综述本文转载自“SIGAI人工智能学习与实践平台”(ID&#xff1a;SIGAICN)导言1. 什么是活体检测&#xff1f;判断捕捉到的人脸是真实人脸&#xff0c;还是伪造的人脸攻击(如&#xff1a;彩色纸张打印人脸图&am…

黑客们的故事(连载三) 因为好奇

上期说到的肯和丹尼斯在黑客文化中的高知名度&#xff0c;不仅是因为他们开发出的操作系统和编程语言&#xff0c;更在于他们行为所体现出的价值观&#xff1a;求知、探索&#xff0c;以及追求极致。这些是黑客精神的精髓——虽然黑客们贯彻这些精神时的方式并不总是合理合法的…

css3禅密花园叫什么名字_新生儿起名:2021元旦出生男孩叫什么名字

2021年元旦节又是新的一年开始&#xff0c;在这辞旧迎新的日子里出生的男孩&#xff0c;都带有极好的寓意兆头&#xff0c;父母们如果能顺借此时机&#xff0c;取一个具有出生纪念意义的名字&#xff0c;那必然能让男孩的成长有着不同与众的历程。2021元旦出生男孩叫什么名字比…

量产之后计算机读不出u盘,求大神、我量产没成功然后U盘就电脑上就不显示了...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼Faq faq faq faq faq faq faq faq faq faq Faq faq faq faq faq faq faq faq faq faq Faq faq faq faq faq faq faq faq faq faq Faq faq faq faq faq faq faq faq faq faq Faq faq faq faq faq faq faq faq faq faq Faq faq faq f…

10个让人很舒服的沟通技巧

转载于:https://www.cnblogs.com/yymn/p/4605237.html

idea将远程代码更新合并到本地_idea 本地调试远程服务器代码

基本原理本机和远程主机的两个 VM 之间使用 Debug 协议通过 Socket 通信&#xff0c;传递调试指令和调试信息。 被调试程序的远程虚拟机&#xff1a;作为 Debug 服务端&#xff0c;监听 Debug 调试指令。jdwp是Java Debug Wire Protocol的缩写。 调试程序的本地虚拟机&#xff…

安卓手机网页 字体垂直方向对齐_初学Excel办公软件字体对齐调整

今天我们依然讲解Excel办公软件的字体对齐调整&#xff0c;上一节我们讲过在菜单栏的上方就可以看到十个功能&#xff0c;然后我们根据这十个功能的调解我们所需要的文字对齐&#xff0c;或者是居中对齐&#xff0c;顶端对齐等等。还有另外一种操作方法&#xff0c;也是方便快捷…

英伟达_如何超越英伟达?

从AI热潮中率先获益的英伟达&#xff0c;其GPU参数和性能频繁出现在不少AI芯片发布会的对比图中。这是在缺乏AI芯片衡量的标准时&#xff0c;新的AI芯片证明自己实力的不错方式。不过&#xff0c;声称性能超越英伟达GPU的创新AI芯片不少&#xff0c;但想要超越英伟达非常困难。…

100多个基础常用JS函数和语法集合大全

网站特效离不开脚本&#xff0c;javascript是最常用的脚本语言&#xff0c;我们归纳一下常用的基础函数和语法&#xff1a; 1.输出语句&#xff1a;document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中…

中职计算机说课稿三篇,精选中职计算机说课稿三篇-20210609060707.docx-原创力文档...

PAGE / NUMPAGES精选中职计算机说课稿三篇中职计算机说课稿(一)位评委老师你们好&#xff01;我是来自XXX职业中专计算机专业的老师XXX,今日我说课的题目是?《电子表格基本操作》?本节课出自高等训练出版社出版的《计算机应用基础》(windowsXPOfficexx?版)课本中第五章第?2…

在struts2中push方法的使用_【干货】网版印刷中水墨使用注意事项及助剂使用方法...

导LEAD语在印刷生产中&#xff0c;水性油墨的黏度、干燥速度和PH值等等都会直接影响印刷质量&#xff0c;那么具体到网版印刷中&#xff0c;在使用水性油墨时应该注意哪些问题呢&#xff1f;常用的印刷助剂都有哪些特点和使用方法&#xff1f;编辑&#xff1a;华印纸箱彩盒 小张…

限定概率抽奖_守护星已点亮,内测皮肤得到没?从天美抽奖概率分析:地址什么梗...

声明&#xff1a;原创文章&#xff0c;禁止抄袭&#xff0c;违者必究&#xff01;大家好&#xff0c;我是你们的小抖。本次五五开黑节最引人注意的活动&#xff0c;当然不是超云龙胆新皮肤了。小抖觉得大家应该与我想的一样&#xff1a;内测皮肤。小抖点亮了所有守护星&#xf…