監聽清單事件的監控核心技術（編寫代碼）

這一段代碼是根據上一篇“監聽清單事件的監控”所編寫的，在onmousemove事件中，可以通過事件對象擷取到滑鼠目前的坐标點，我們該如何将坐标點轉化成為元素的left和top屬性值就是拖動技術的核心呢？我們就是能夠把滑鼠的移動在所需的一定空間坐标來實作我們把握要清單事件中的定位置的坐标，也就是不停地移動滑鼠時我們便會發現coord中的坐标資訊不斷地被更新；注意，可視範圍是除了菜單條和狀态條外的整個浏覽器視窗，因為監聽的是document的事件是經過修改監聽對象為dragger來觀察效果。例如：onmousemove事件沒有任何前置條件，來擷取滑鼠光标在整個浏覽器的視窗中的目前坐标：<!-坐标顯示框--> 

              <div  id=' coord '>

              </div>

              <script>

                    //監聽 document 的 事件  （ 是把所監聽的對象事件用來進行修改監聽對象的）

                    document. = function (e) {

                           e = e| |event;

                           //更新坐标資訊

                           document.getElementById('coord').innerHTML= e.clientx+":"+e.clientY;

                     }

               </Script>

  在應用onmousemove事件的同時，滑鼠的移動事件；包括左鍵、右鍵和滾輪。與onmousedown事件成相反，并且隻能在onmousedown事件發生後才能發生onmouseup事件，是因為隻有案件被按下後才會發生彈起。當滑鼠按鍵在dragger上按下時，onmousedown事件将被觸發，提示框顯示“元素被拿起”。

與其同時，無論元素的定位方式是絕對的還是相對的，要讓它動起來就隻有不斷地更新它的left和top的屬性；編寫的代碼與事件。

          <style>

                #dragger  {

                       ;

                       height:100px;

                       background:#ccc;

                       position:relative;

                 }

           </style>

           <div  id='dragger'></div>

           <script>

                 var  dragger  =  document.getElementById('dragger');

                 //監聽滑鼠事件

                 dragger. =  function ()  {

                       if (!dragger.onmousemove)

                            dragger. =  function ()  ｛

                                   //設定x坐标

                                  this.style.left  =  event.clientX ;

                                  //設定Y坐标

                                  this.style.top  =  event.clientY ;

                            }

                 dragger. = function () {

                        alert ("元素被放下") ;

            <script>

       我們把代碼運作的結果是在dragger上監聽 dragger. = function () { 

                                                                //設定X坐标

                                                                this.style.left = event.clientX ;

                                                                //設定Y坐标

                                                                 this.style.top = event.clientY ;

     想到這我們便把它修改為： dragger. = function () {

                                            //設定X坐标

                                           this.style.left = event.clientX - 50 ；                     

                                           //設定Y坐标

                                          this.style.top = event.clientY -  50 ;                                                          

     雖然沒有在快速移動滑鼠時因為dragger的移動速度跟不上滑鼠的移動速度，會導緻dragger脫标而無法監聽滑鼠事件進而失去了移動功能，為了解決問題我們要在元素級别更高的地方進行監聽，document的代碼：

                                   <script>

                                         var  dragger = document.getElementById ('dragger') ;

                                         //監聽滑鼠事件

                                         dragger. = function () {

                                               if (!document.onmousemove)

                                                    document. = function () {

                                                           //設定X坐标

                                                           dragger.style.left = event.clientX ;

                                                           //設定Y坐标

                                                            dragger.style.top = event.clientY ;

                                                     }

                                         }

                                         document. = function () {

                                                document. = null ;

                                   </script>

        從現在看來這樣輸入代碼效果就比較“完美”了，document作為DOM級别最高的元素，在它上面進行事件監聽最好不過了；但是别忘了在松開滑鼠時把onmousemove事件去掉，這個原因與在給dragger設定onmousedown事件時才綁定onmousemove事件的原因相同，是以拖了它才能動，不拖動它的時候就不能動。事件的本身先後沒有順序，是以onmousemove在任何時候都會觸發，代碼中也要進行控制。

        這并沒有使我們如願，也沒達到“核心技術”；雖然我們已經完成了一些主要的步驟，我們還雖要解決一個問題，設定計算滑鼠點相對于元素的簡距。下面我們來解決這個問題：

                    <script>

                          var dragger = document.getElementById('dragger') ;                                   

                             //監聽滑鼠事件

                          dragger. = function () {

                             //擷取滑鼠目前坐标

                             var pageX = event.clientX ;

                             var pageY = event.clientY ;

                             //擷取元素坐标

                            //當沒有設定left和top屬性時，IE下預設值為auto

                            var offx = parseInt (this.currentStyle.left)  || 0 ；

                            var offY = parseInt (this.currentStyle.top)  || 0 ;

                            //擷取滑鼠相對于元素的間距

                            var offXL = pageX – offX ;

                            var offYL = pageY  -  offY ;

                            if ( !document. )

                                  document. = function () {

                                          //設定X坐标

                                          dragger.style.left = event.clientX – offXL ;

                                          //設定Y坐标

                                          dragger.style.top = event.clientY -  offYL ;

                                   }

                        }

                        document. = function () {

                               document. = null ;

                         }

                   </script>

  運作代碼後，會發現已經完全解決了拖動開啟的閃動問題，在滑鼠點和元素左上角坐标之間存在着間距，如果直接把滑鼠點坐标賦給元素，那麼這一部分間距就會消失掉，進而造成拖動開啟閃動；好在這個間距能在滑鼠單擊後按鍵就被确定了，是以隻需要在onmousedown事件中擷取這個間距，然後在onmousemove實踐中移動時用滑鼠坐标減去這間距，就可以得到元素的坐标了。如圖示：

<a href="http://huangyouliang10.blog.51cto.com/attachment/201009/9/1562091_12840168895S0a.gif"></a>

1.滑鼠邊距                           

2.元素邊距

版權

本文轉自huangyouliang10 51CTO部落格，原文連結:http://blog.51cto.com/1572091hyl10/389525