- window.event
- IE：有window.event对象
- FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(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。
- 通用：event.clientY+document.documentElement.scrollTop（加垂直滚动条）。
- 通用：event.clientX+document.documentElement.scrollLeft（加水平滚动条）。
- 例：
<script>
function xyzb(xy){
xl=xy.clientX+document.documentElement.scrollLeft;
yr=xy.clientY+document.documentElement.scrollTop;
document.getElementById("xys").innerHTML=xl+","+yr;
}
</script>
<div id="xys" style="width:500px;height:500px;border:1px solid;" onmousemove="xyzb(event);"></div>
- 标签的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", func);。
- FF：element.addEventListener("click", func, true)。
- 通 用：element.onclick=func。虽然都可以使用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")。
- 父节点、子节点和删除节点
- IE：parentElement、parement.children，element.romoveNode(true)。
- FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
- 画图
- IE：VML。
- FF：SVG。
- CSS：透明
- IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
- FF：opacity:0.6。
- CSS：圆角
- IE：不支持圆角。
- FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
- CSS：双线凹凸边框
- IE：border:2px outset;。
- FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。
javascript
IE与FireFox在javascript中兼容性问题(经典)
setTimeout和setInterval的使用
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
方 法
实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。
虽然表面上看来setTimeout只能应用在on-off方式的动作上，不过可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作：
File: settimeout_setinterval.js
showTime();
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString());
setTimeout("showTime()", 5000);
}
一旦调用了这个函数，那么就会每隔5秒钟就显示一次时间。如果使用setInterval，则相应的代码如下所示：
File: settimeout_setinterval2.js
setInterval("showTime()", 5000);
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString());
}
这两种方法可能看起来非常像，而且显示的结果也会很 相似，不过两者的最大区别就是，setTimeout方法不会每隔5秒钟就执行一次showTime函数，它是在每次调用setTimeout后过5秒钟 再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每7秒钟才执行一次。而 setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。
如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。
|
|
函数指针的使用 |
|
两个计时函数中的第一个参数是一段代码的字符串，其实该参数也可以是一个函数指针，不过Mac下的IE 5对此不支持。 如果用函数指针作为setTimeout和setInterval函数的第二个参数，那么它们就可以去执行一个在别处定义的函数了： setTimeout(showTime, 500); function showTime() { var today = new Date(); alert("The time is: " + today.toString()); } 另外，匿名函数还可以声明为内联函数： setTimeout(function(){var today = new Date(); alert("The time is: " + today.toString());}, 500); |
讨 论
如果对计时函数不加以处理，那么setInterval将会持续执行相同的代码，一直到浏览器窗口关闭，或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。
当setInterval调用执行完毕时，它将返回一个timer ID，将来便可以利用该值对计时器进行访问，如果将该ID传递给clearInterval，便可以终止那段被调用的过程代码的执行了，具体实现如下：
File: settimeout_setinterval3.js (excerpt)
var intervalProcess = setInterval("alert(‘GOAL!’)", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal()
{
clearInterval(intervalProcess);
}
只要点击了stopGoalLink，不管是什么时 候点击，intervalProcess都会被取消掉，以后都不会再继续反复执行intervalProcess。如果在超时时间段内就取消 setTimeout，那么这种终止效果也可以在setTimeout身上实现，具体实现如下：
File: settimeout_setinterval4.js (excerpt)
var timeoutProcess = setTimeout("alert(‘GOAL!’)", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal()
{
clearTimeout(timeoutProcess);
}
页面内层的拖动以及仿lightbox显隐效果
调用的JS代码：
var Layer=”;
var iLayerMaxNum=1000;
var a;
document.onmouseup=me;
document.onmousemove=ms;
var b;
var c;
function Move(Object,event){
Layer=Object.id;
if(document.all){
document.getElementById(Layer).setCapture();
b=event.x-document.getElementById(Layer).style.pixelLeft;
c=event.y-document.getElementById(Layer).style.pixelTop;
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
b=event.layerX;
c=event.layerY+100;
};
if(Layer!="Layer"+a){
document.getElementById(Layer).style.zIndex=iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
}
}
function ms(d){
if(Layer!=”){
if(document.all){
document.getElementById(Layer).style.left=event.x-b;
document.getElementById(Layer).style.top=event.y-c;
}else if(window.captureEvents){
document.getElementById(Layer).style.left=(d.clientX-b)+"px";
document.getElementById(Layer).style.top=(d.clientY-c)+"px";
}
}
}
function me(d){
if(Layer!=”){
if(document.all){
document.getElementById(Layer).releaseCapture();
Layer=”;
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
Layer=”;
}
}
}
function Close(n){
var e=’Layer’+n;
document.getElementById(e).style.display=’none’;
}
function Show(n){
var e=’Layer’+n;
document.getElementById(e).style.zIndex =iLayerMaxNum+1;
document.getElementById("aspk").style.display = "block";
document.getElementById("aspk").style.zIndex = iLayerMaxNum;
var size = getPageSize();
document.getElementById("aspk").style.width = size[0];
document.getElementById("aspk").style.height = size[1];
}
function Hide(){
document.getElementById("aspk").style.display = "none";
iLayerMaxNum=iLayerMaxNum+2;
}
function getPageSize(){
var de = document.documentElement;
var w = de.clientWidth;
var h = de.clientHeight;
arrayPageSize = new Array(w,h);
return arrayPageSize;
}
html文件演示代码：
<div style="display:none;" id="aspk" onclick="Hide();"></div>
<div>
<div id="Layer1" style="position:absolute;cursor:move;" onmousedown="Move(this,event)" ondblclick="Show(1)">aaaaaaa</div>
<div id="Layer2" style="position:absolute;cursor:move;" onmousedown="Move(this,event)" ondblclick="Show(2)">bbbbbbb</div>
……
</div>