深入PHP许愿墙模块功能分析(2)


 if(document.all){
  alert("is IE!");
 }


window.captureEvents()
window.captureEvents(event1 | event2 | eventN)
captureEvents()方法捕获所有发生的事件类型,如果有多个事件发生,则用|竖线隔开;captureEvents()方法主要事件如下:
Event.ABORT
Event.BLUR
Event.CHANGE
Event.CLICK
Event.DBLCLICK
Event.DRAGDROP
Event.ERROR
Event.FOCUS
Event.KEYDOWN
Event.KEYPRESS
Event.KEYUP
Event.LOAD
Event.MOUSEDOWN
Event.MOUSEMOVE
Event.MOUSEOUT
Event.MOUSEOVER
Event.MOUSEUP
Event.MOVE
Event.RESET
Event.RESIZE
Event.SELECT
Event.SUBMIT
Event.UNLOAD
示例代码:

复制代码 代码如下:


<html>
    <head>
    <title>Using window.captureEvents</title>
    <script language="JavaScript1.2">
    <!--
    var counter = 0;
    window.captureEvents(Event.CLICK)
    window.onclick = myClickHandler;
    function myClickHandler(){
  window.document.myForm.myText.handleEvent;
    }
    function changeText(){
  document.myForm.myText.value = counter++;
    }
    -->
    </script>
    </head>
    <body>
    <form>
  <input type=TEXT size=2 value="">
    </form>
    </body>
</html>


当鼠标移动时,触发moveStart()函数,代码如下:

复制代码 代码如下:


function moveStart(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";
  }
 }
}


应用DOM方法(document对象的getElementById方法)获取包含许愿字条layer层左边距和上边距的距离。b和c分别表示获取Layer层的横纵坐标。
clientX:检索与窗口客户区域有关的鼠标坐标的x坐标,属性为只读,没有默认值。
clientY:检索与窗口客户区域有关的鼠标光标的y坐标,属性为只读,没有默认值。
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft

各浏览器通用属性:
screenX:
鼠标在显示屏幕上的坐标。
clientX:鼠标在页面显示区域的坐标。

特有属性:(
注:IE和FF的定位有个1px的差别,实际上,IE的定位从0开始,FF的定位从1开始,FF永远会比IE大1px,需要根据实际情况处理。)
pageX:FF特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性。

layerX:FF特有,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。

offsetX:IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF没有直接替换的属性。

x:
IE特有,跟layerX一个效果,可作为layerX的直接替换属性。

offsetLeft:这个属性不是事件对象的属性,而是DOM对象所有的,该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,虽然话是这么说的,但是不同的浏览器效果不一样,FF中严格按上述说明执行,但是在IE6/7中,这个属性返回该DOM对象在其直接父对象中的位置,但是IE8改正了这个问题,不过IE8又有了一个新问题,其他的浏览器都是从父对象的内容区域的左上角开始定位,IE8确是从父元素的border的左上角开始定位,由于测试环境为IETester中的IE8,不能排除是IETester的问题。
当鼠标抬起时,触发moveEnd()函数,代码如下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a36cf8cd326a4ac9ed3b48298984555e.html