大魚

          深刻認識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 大魚 閱讀(267) 評論(0)  編輯  收藏 所屬分類: html


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


          網站導航:
           
          主站蜘蛛池模板: 年辖:市辖区| 陇西县| 宁津县| 黑河市| 孟津县| 天祝| 镇赉县| 沙坪坝区| 桐庐县| 广东省| 安仁县| 沁源县| 抚州市| 远安县| 都安| 宜君县| 莫力| 德钦县| 蓬安县| 昌都县| 平远县| 治县。| 松溪县| 成安县| 邢台县| 汉中市| 赣州市| 无极县| 贵港市| 图们市| 新津县| 盐山县| 奉新县| 碌曲县| 三穗县| 无棣县| 江川县| 离岛区| 宁波市| 仪征市| 桂林市|