快捷導(dǎo)航

Javascript拖拽&拖放系列文章3之細(xì)說(shuō)事件對(duì)象第1/4頁(yè)

更新時(shí)間：2008年09月25日 16:15:15 作者：

Javascript中的事件對(duì)象其實(shí)和.NET中繼承自EventArgs類(lèi)的派生類(lèi)類(lèi)似，用來(lái)給事件處理程序傳遞狀態(tài)信息，從而進(jìn)行相應(yīng)的操作。這一篇文章將講述Javascript事件對(duì)象中和實(shí)現(xiàn)拖拽功能相關(guān)的幾個(gè)屬性，并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個(gè)類(lèi)中，從而適應(yīng)所有的瀏覽器。

在閱讀本文前，可以先閱讀《Javascript拖拽&拖放系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性》這篇文章，以理清上下文關(guān)系。
好了，讓我們開(kāi)始進(jìn)入正題。
模型相同的屬性/方法
1 Button屬性
Integer類(lèi)型，可讀可寫(xiě)。對(duì)于特定的鼠標(biāo)事件，表示按下的鼠標(biāo)按鈕，它可以在拖拽的時(shí)候，判斷是否是鼠標(biāo)左鍵引發(fā)mousedown事件。它的所有取值及其意義（參考自《Javascript高級(jí)程序設(shè)計(jì)》）好了，讓我們開(kāi)始進(jìn)入正題。
3.1 e/window.Event對(duì)象的屬性/方法
3.1.1 IE事件模型和DOM事件如下：
0-未按下按鈕
1-按下左鍵
2-按下右鍵
3-同時(shí)按下左右按鈕
4-按下中鍵
5-按下左鍵和中鍵
6-按下右鍵和中鍵
7同時(shí)按下左中右鍵
mouseup的button屬性返回的數(shù)值和mousedown事件中的完全一樣。

注：在兼容DOM事件模型的所有瀏覽器中，0表示按下左鍵，數(shù)值1并不存在，2表示按下右鍵，對(duì)于非鼠標(biāo)事件，返回“undefined”。

2 clientX、clientY屬性
這兩個(gè)屬性的類(lèi)型都是Integer，單位是像素，可讀可寫(xiě)。分別表示相關(guān)事件發(fā)生時(shí)，鼠標(biāo)在瀏覽器的客戶(hù)端區(qū)域（不包括工具欄、滾動(dòng)條等）的x坐標(biāo)和y坐標(biāo)。用一張圖片來(lái)解釋就再好不過(guò)了，請(qǐng)看：

圖3.1：clientX和clientY屬性

以下代碼是一個(gè)非常簡(jiǎn)單的示例，它可以隨時(shí)定位鼠標(biāo)的坐標(biāo)，并將結(jié)果顯示在兩個(gè)文本框中，如果愿意的話，你可以嘗試運(yùn)行它，兼容目前所有的現(xiàn)代瀏覽器。

示例代碼1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">

       body{
         border:1px solid black;
        margin:0px;
       }
    </style>
    <script type="text/javascript" language="JavaScript">
    document.onmousemove=move;
    function move(e){
      if(!e)
      {
        e=window.event;
      }
      var xElement=document.getElementById("x");
      var yElement=document.getElementById("y");
      xElement.value=e.clientX;
      yElement.value=e.clientY;

    }
    </script>
  </head>
  <body>
  <input type="text" id="x" value="" />
  <input type="text" id="y" value="" />
  </body>
</html>






3 type屬性

                            1234下一頁(yè)閱讀全文
                            
                                您可能感興趣的文章:JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法
Java實(shí)現(xiàn)鼠標(biāo)拖放功能的方法
Vue.js實(shí)現(xiàn)拖放效果的實(shí)例
javascript 拖放效果實(shí)現(xiàn)代碼
JavaScript 拖放效果代碼
JavaScript 圖片放大鏡（可拖放、縮放效果）
基于jQuery實(shí)現(xiàn)的百度導(dǎo)航li拖放排列效果，即時(shí)更新數(shù)據(jù)庫(kù)
廣泛收集的jQuery拖放插件集合
asp.net+jquery Gridview的多行拖放， 以及跨控件拖放
腳本div實(shí)現(xiàn)拖放功能(兩種)