不同的浏览器，对不同的/相同的属性、方法等的支持程度也会有所差别，要想达到满意的效果，需要做一些处理、给不同的浏览器量体裁衣，也就是所说的达到兼容。
常见的处理方式：（能力检测和浏览器检测）
1、三目运算式
typeof A=='B'?A:C
浏览器的类型A是B吗，是的话就用A，否则就用C。
2、逻辑或（没有1可靠）
var A=B||C
浏览器存在B或C其一，或者都存在。都存在默认用B。
3、检测浏览器引擎和版本号
BrowserDetect.browser == 'Internet Explorer' &&BrowserDetect.version <= 7
根据不同的浏览器做不同的方案处理。
上栗子
IE、Safari、Opera 和Chrome 都提供screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时支持这两个属性。但是不建议在Opera中使用screenX 和screenY。
在IE、Opera 中，screenLeft 和screenTop 中保存的是从屏幕左边和上边到由window 对象表示的页面可见区域的距离（包括工具栏） ，而在Chrome、Firefox 和Safari 中，screenY 或screenTop中保存的是整个浏览器窗口相对于屏幕的坐标值，即在窗口的y 轴坐标为0 时返回0。
outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸大小。而innerWidth 和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。
document.documentElement.clientWidth 和
document.documentElement.clientHeight 中保存了页面视口的信息。在IE6中，这些属性在标准模式（document.compatMode == "CSS1Compat"）下才有效，在混杂模式（document.compatMode == "BackCompat"）下必须通 document.body.clientWidth 和 document.body.clientHeight 来获取
1、先创建个简单的页面。
2、在页面中加上js代码指定打开页面。
3、在浏览器中重新输入这个页面地址，按回车打开的页面就不在是原来的页面而是js指定的页面。
4、或者换成如图指定的打开方式。
5、再在浏览器中输入页面地址。
6、按下回车这时就会打开2个页面，一个是自己的默认页面，一个是js指定的页面。
js实现一些跨浏览器的事件方法用JavaScript实现事件的绑定，移除，以及一些常用的事件属性的获取，时常要考虑到在不同浏览器下的兼容性，下面给出了一个跨浏览器的事件对象：
var
EventUtil
=
{
on:
function(element,
type,
handler)
{/*
添加事件
*/
if
(element.addEventListener)
{
element.addEventListener(type,
handler,
false)
}
else
if
(element.attachEvent)
{//IE
注意：此时事件处理程序会在全局作用域中运行，因此用attachEvent绑定的事件，此时在事件处理函数里的this
等于window，使用时要注意
element.attachEvent("on"
+
type,
handler)
}
else
{
element["on"
+
type]
=
handler
}
},
off:
function(element,
type,
handler)
{/*
移除事件
*/
if
(element.removeEventListener)
{
element.removeEventListener(type,
handler,
false)
}
else
if
(element.detachEvent)
{
element.detachEvent("on"
+
type,
handler)
}
else
{
element["on"
+
type]
=
null
}
},
getEvent:
function(event)
{/*
返回对event对象的引用
*/
return
event
?
event
:
window.event
},
getTarget:
function(event)
{/*
返回事件的目标
*/
return
event.target
||
event.srcElement
},
preventDefault:
function(event)
{
/*
取消事件的默认行为
*/
if
(event.preventDefault)
{
event.preventDefault()
}
else
{
event.returnValue
=
false
}
},
stopPropagation:
function(event)
{/*
阻止事件冒泡
*/
if
(event.stopPropagation)
{
event.stopPropagation()
}
else
{
event.cancelBubble
=
true
}
},
/*
mouseover
和mouserout
这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
getRelatedTarget:
function(event)
{
if
(event.relatedTarget)
{
return
event.relatedTarget
}
else
if
(event.toElement)
{//IE8
mouserout事件
return
event.toElement
}
else
if
(event.fromElement)
{//IE8
mouseover事件
return
event.fromElement
}
else
{
return
null//其他事件
}
}
}
调用如下：
EventUtil.on(document,
"click",
function(event){//为document元素绑定click事件
event
=
EventUtil.getEvent(event)//获取event事件对象
alert("Screen
coordinates:
"
+
event.screenX
+
","
+
event.screenY)
})
文章参考自《JavaScript高级程序设计第三版》
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
