如何在jQuery上區別鼠標/離開事件？

Question

有沒有辦法知道鼠標事件是否從元素的特定一側離開？我的意思是，我有一個鼠標懸停/鼠標事件的DIV，我想只在鼠標離開時才觸發動作DIV的右側和右側，但如果從底部或頂部離開，則不應觸發任何操作。

預先感謝您。

Answer 1

使用jQuery你可以使用事件的OFFSETX財產像這樣：

$('#element').mouseout(function(e) { 
    if (e.offsetX < 0 || e.offsetX > $(this).width()) { 
     alert('out the side!'); 
    } 
}); 

我不認爲性能可靠的跨瀏覽器（W/O jQuery的），我相信jQuery的正常化它（我已經在Chrome & IE7-9中測試過它）。基本上，該屬性包含在事件觸發時光標相對於目標元素的位置。如果該值小於0或大於元素的寬度，則知道該元素在離開元素邊界時位於元素左側或右側之外。

Answer 2

可以檢查event object的pageX和pageY性質和所討論比較它們元件的尺寸（例如，從offset和在適當outerWidth/outerHeight相加）。

Answer 3

不是簡單的方法，AFAIK，但它可以完成。

在鼠標移出時，您將鼠標位置與元素位置進行比較。

見鼠標位置教程jQuery的： http://docs.jquery.com/Tutorials:Mouse_Position

（它使用鼠標移動在本教程中，但它也適用於的mouseenter /鼠標離開）

Answer 4

也許你可以使用鼠標移開jQuery函數（或鼠標離開？ ）並使用javascript添加自定義處理程序以獲取元素的座標，高度和寬度，並跟蹤鼠標座標是否超出邊界。

即你的鼠標事件觸發，處理程序在（x，y） - >（10,10）處定位元素，高度爲20，寬度爲20.如果鼠標座標更大X上的30以及Y上的10和30之間，鼠標已經留在了右側。

Answer 5

我意識到這是一個老問題，但我一直在尋找類似於懸停效果的東西。我發現jquery.hoverdir

可能是得心應手......