這一段代碼是根據上一篇“監聽列表事件的監控”所編寫的，在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實踐中移動時用鼠標坐標減去這間距，就可以得到元素的坐標了。如圖示：

?????????????????

?

1.鼠標邊距???????????????????????????

2.元素邊距

總結

以上是生活随笔為你收集整理的监听列表事件的监控核心技术（编写代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。