2011-03-31 74 views
0

所以我一直在考慮惱人的頁面用戶:當用戶不移動鼠標時,它應該在鼠標位置顯示一個圖層,並在鼠標移動時將其隱藏,並延遲。在jQuery中跟蹤「OnMouseNotMoving」事件?

我有延遲部分想出了使用jQuery的延遲()。但我不確定實施OnMouseNotMoving的最佳方式是什麼。

在jQuery中是否有一個'計時器',即當鼠標不移動時會啓動的東西,並且會在足夠的時間過後觸發事件?

Thx。

回答

3

在mousemove上,您可以添加使用setTimeout()和clearTimeout()方法。事情是這樣的:

var timeout = null; 

    $(document).bind('mousemove', function(e) { 
     // use e.pageX and e.pageY to position your message 

     // clear and set timeout 
     if(timeout) { 
      hideMessage(); 
      clearTimeout(timeout); 
     } 
     timeout = setTimeout(function(x, y){ 
      return showMessage(x, y); 
     }(e.pageX, e.pageY), 3000); 

     function showMessage(x, y) { 
      // your code to show message 
     } 
     function hideMessage() { 

     } 
    }); 
+0

這實際上是更好的 – 2011-03-31 07:43:48

+0

thx爲你解答。這聽起來像一個解決方案。設置/獲取超時正是我一直在尋找的。 – hummingBird 2011-03-31 07:50:23

1

你必須自己創建這個事件。 JavaScript本身有定時器。您正在尋找的方法是setInterval()。它將以指定的時間間隔執行一個功能。

你基本上檢查鼠標座標,如果他們沒有移動一個指定的時間間隔,然後做你的事情。

+0

謝謝。這也是我的想法。我記得我們曾經在cs課程中使用javascript的定時器一次。我得看看這個。 – hummingBird 2011-03-31 07:48:56

0

走那麼遠,我知道,但爲什麼不創建一個獲取鼠標位置的間隔並檢查它是否已經改變:

var x, y, time, mouseTimeout = 2000; 

function checkPosition(e) { 
    var t = new Date(); 
    if (e.clientX !== x || e.clientY !== y) { 
    //mouse changed 
    time = t; 
    x = e.clientX; 
    y = e.clientY; 
    } 
    if ((t - time) > mouseTimeout) { 
    //annoy users 
    } 
} 

<body onmousemove="checkPosition();"> 
</body> 
+0

1)你可能打算在第一個裏面有第二個if語句。 2)該位置幾乎總是會發生變化,因爲您只能在mousemove上執行代碼。 – typeof 2011-03-31 07:59:00

+0

我不應該那麼早發佈;) – 2011-03-31 11:39:26