2015-02-08 137 views
1

有沒有使用mousemove事件來捕獲遊標碰撞的每個像素的方法?這樣下面的條件會一直髮生。Javascript mousemove事件觸發

if(e.pageX == 100) 

我發現,如果鼠標快速移動然後跳過之間的像素。但是,如果我將它慢慢就會趕上像素一個接一個。

由於

+1

你到底想達到什麼目的?如果將條件更改爲'> =',則可以檢測邊緣。看到這裏:http://jsfiddle.net/e0x2mmzc/ – bluefog 2015-02-08 08:45:12

回答

2

鼠標移動觸發在每一個鼠標移動和目標是通過鼠標覆蓋最上層,最嵌套元素。 當瀏覽器內部時間僅允許時,Mousemove,mouseover和mouseout觸發。 這意味着如果快速移動鼠標,中間DOM元素和父母將被跳過。

因此,您可以移動元素而不觸發鼠標移動/鼠標懸停。

您也可以從孩子通過家長移動,而不在父母任何鼠標事件的瀏覽器跳過中間的元素

你的唯一保證是,只要鼠標懸停被觸發時,鼠標移出會觸發過。

+0

我想檢查每100px,看看左上角的元素是否通過如此:element.position()。left%100 == 0 – Aiden 2015-02-08 09:09:11

+0

正如我所說,它已經與像素無關,它是時間限制,可能因瀏覽器不同而不同,所以你不能指望它是一致的,**你不能假設**只能在1秒內處理10個鼠標移動事件,例如。 – Flot2011 2015-02-08 09:18:28

+0

是的,我知道:(只是以爲有人可能知道工作。謝謝你的幫助anywayz。 – Aiden 2015-02-08 09:19:56

0

鼠標光標被選中,如果自上次的位置已經改變被觸發mousemove事件,但僅與新檢測到的位置。

你可以做的是存儲最後一次已知的鼠標位置,並計算它與當前位置之間的一條直線來完成你的計算。 這並不需要太多的代碼......一個簡單的方法是

// Calls `f(x, y)` for each point starting from 
// `(x0, y0)` and ending in `(x1, y1)` (excluded) 
// moving along an 8-connected straight path. 
function processLine(x0, y0, x1, y1, f) { 
    var ix = x0 < x1 ? 1 : -1, dx = Math.abs(x1 - x0); 
    var iy = y0 < y1 ? 1 : -1, dy = Math.abs(y1 - y0); 
    var m = Math.max(dx, dy), cx = m >> 1, cy = m >> 1; 
    for (var i=0; i<m; i++) { 
     f(x0, y0); 
     if ((cx += dx) >= m) { cx -= m; x0 += ix; } 
     if ((cy += dy) >= m) { cy -= m; y0 += iy; } 
    } 
} 

,並可以作爲

processLine(10, 20, 30, 35, function(x, y) { 
    console.log("x=" + x + ", y=", y); 
});