大魚

          深刻認識clientX,offsetX,screenX

          clientX 設置或獲取鼠標指針位置相對于窗口客戶區域的 x 坐標,其中客戶區域不包括窗口自身的控件和滾動條。
          clientY 設置或獲取鼠標指針位置相對于窗口客戶區域的 y 坐標,其中客戶區域不包括窗口自身的控件和滾動條。
          offsetX 設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標。
          offsetY 設置或獲取鼠標指針位置相對于觸發事件的對象的 y 坐標。
          screenX 設置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標。
          screenY 設置或獲取鼠標指針位置相對于用戶屏幕的 y 坐標。
          x 設置或獲取鼠標指針位置相對于父文檔的 x 像素坐標。
          y 設置或獲取鼠標指針位置相對于父文檔的 y 像素坐標

          實驗實例(來源于網絡,修改過):

          view plaincopy to clipboardprint?
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <BODY onclick='test()' style="margin:0 0 0 0" mce_style="margin:0 0 0 0">
          <font color=green>設置或獲取鼠標指針位置相對于窗口客戶區域的 x,y 坐標,其中客戶區域不包括窗口自身的控件和滾動條。</font>
          <br/>
          clientX=<INPUT TYPE="text" NAME="x1">
          clientY=<INPUT TYPE="text" NAME="x2">
          <br/>
          <br/>
          <font color=blue>設置或獲取鼠標指針位置相對于觸發事件的對象的 x,y 坐標。 </font>
          <br/>
          offsetX =<INPUT TYPE="text" NAME="x3">
          offsetY =<INPUT TYPE="text" NAME="x4">
          <br/>
          <br/>
          <font color=green>設置或獲取獲取鼠標指針位置相對于用戶屏幕的 x,y 坐標 </font>
          <br/>
          screenX =<INPUT TYPE="text" NAME="x5">
          screenY =<INPUT TYPE="text" NAME="x6">
          <br/>
          <br/>
          <font color=blue>設置或獲取鼠標指針位置相對于父文檔的 x,y 像素坐標。</font>
          <br/>
          x=<INPUT TYPE="text" NAME="x7">
          y=<INPUT TYPE="text" NAME="x8">
          <br/>
          <br/>
          <TABLE align="center" width=400 height=500 border=1 style="border-style:none" mce_style="border-style:none" CELLPADDING=0 CELLSPACING=0 onclick='test()'>
          <TR>
          <TD>a</TD>
          <TD>b</TD>
          </TR>
          <TR>
          <TD>c</TD>
          <TD>d</TD>
          </TR>
          </TABLE>
          </body>
          </html>
          <SCRIPT LANGUAGE="JavaScript">
          <!--
          function test(){
          document.all.x1.value=event.clientX;
          document.all.x2.value=event.clientY;
          document.all.x3.value=event.offsetX;
          document.all.x4.value=event.offsetY;
          document.all.x5.value=event.screenX;
          document.all.x6.value=event.screenY;
          document.all.x7.value=event.x;
          document.all.x8.value=event.y;
          }
          //-->
          </SCRIPT>

          實驗結果分析:

          clientX 和x值在實驗過程中,沒有發現值不一樣的例子,所以我認為它們在效果上是一樣的!
          offsetX 是相對于當前窗口內,本觸發事件對象(或者是某一區域)而言,如本例中你單擊a區域,值是相對于a所在<td>區域而言,同理b,c,d都一樣!
          clientX ,x,offsetX共同點:它們都是想對于相對位置,只是offsetX是相對于觸發對象的父容器而言!
          screenX是相對與客戶端顯示器而言,是絕對位置!

          posted on 2011-10-06 23:32 大魚 閱讀(264) 評論(0)  編輯  收藏 所屬分類: html


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 井冈山市| 三门峡市| 宾川县| 江陵县| 安陆市| 阳城县| 巴彦县| 郧西县| 涪陵区| 沙湾县| 连云港市| 剑川县| 石屏县| 墨玉县| 辽宁省| 微山县| 武隆县| 台山市| 孟州市| 长乐市| 光泽县| 灵寿县| 思南县| 武胜县| 南陵县| 太仆寺旗| 嘉禾县| 鄂托克前旗| 上栗县| 攀枝花市| 平顶山市| 墨竹工卡县| 武威市| 普陀区| 左贡县| 星座| 宣恩县| 盐池县| 密山市| 涟水县| 社会|