2015-05-15 97 views
1

我需要通過拖動我的網站滾動條來檢測鼠標移動,這可以讓我檢測用戶的不活動狀態。當我用鼠標拖動滾動條時不會觸發鼠標移動事件

正在拖動滾動條時,鼠標移動事件不會觸發。

不工作在IE11和Chrome瀏覽器,我看到Firefox 32中的mousemove事件觸發,我還沒有測試過其他瀏覽器。

示例代碼:

HTML

<div class="parent" style="background-color:black;width:100px;height:500px;overflow:scroll;"> 
    <div class="child" style="background-color:blue;width:100px;height:1000px"></div> 
</div> 

的Javascript:

var lastMove; 
$(window).mousemove(function (e) { 
    lastMove = new Date(); 
    $(".child").css("background-color", "red"); 

    lastTimeMouseMoved = new Date().getTime(); 
     var t=setTimeout(function(){ 
      var currentTime = new Date().getTime(); 
      if(currentTime - lastTimeMouseMoved > 10){ 
       $(".child").css("background-color", "blue"); 
      } 
     },10); 
}); 

JS小提琴: https://jsfiddle.net/btdxha8k/

綁定到滾動事件的解決方案,我現在有,但我想知道是否有更多的c精益解決方案,因爲我需要綁定到100多個不需要滾動事件的div,因爲這看起來非常冗餘,骯髒,我通常不喜歡在我的代碼中使用像這樣的黑客。

乾杯;)

+0

我看不到任何理由你不能刪除'onscroll'處理程序自動移動開始時的滾動條,以及當自動移動停止時重新應用onscroll處理程序。您不能觸發未附加的事件。因此,事件觸發您的處理程序的唯一時間是用戶啓動滾動時。 – enhzflep

+0

是的,你只能瞭解客戶端區域的鼠標事件。滾動條不是窗口客戶區的一部分。 – enhzflep

+0

我看到Firefox 32中的mousemove事件觸發, – Xela

回答

1

我猜想,鼠標事件不會引發,因爲滾動條在技術上是你的頁面之外。

相反,你可以聽onscroll事件嗎?只有當你在屏幕內移動鼠標

https://api.jquery.com/scroll/

2

鼠標移動事件被觸發。 你的問題在這裏滾動不是屏幕的內側捕捉鼠標移動事件,所以你可以添加具有相同功能的滾動事件

+0

@Xela我不認爲在現代這將會造成如此巨大的性能問題,只是一個滾動事件 – nikoss

+0

是啊我的意思是它有點多餘的綁定鼠標移動事件溢出的元素,不需要它們我喜歡讓我的代碼看起來很漂亮對於需要維護它的任何其他人來說都不那麼令人困惑 – Xela

+0

@Xela如果要談論性能,我首先建議你擺脫jquery有更簡單的純js函數,用於許多jQuery替代品,您可以使用它們而不用jquerys填充ram變量 – nikoss