2014-05-21 54 views
2

我想知道是否有方法捕獲某種鼠標事件或另一個事件,當鼠標離開身體越過頂部邊界?捕獲鼠標離開身體元素越過頂部邊界

那麼我有這個活動在我的網站,當用戶離開body元素和cookie沒有設置我只向他們展示這個彈出一次。但是這個事件觸發了身體的各個方面。休假

TR =觸發事件

我woule喜歡:

  tr 
     +----------+ 
     |   | 
    no-tr|   |no-tr 
     |   | 
     +----------+ 
      no-tr 

但我有

   tr 
     +----------+ 
     |   | 
    tr|   |tr 
     |   | 
     +----------+ 
      tr 

我有這樣的事情:

$("body").one("mouseleave", initPopup) 

我的問題是否有辦法? o僅在用戶通過頂部邊框離開身體時才觸發此事件,但不能用於其他邊界?

+0

的可能重複[如何不同,鼠標移開/離開並排事件jQuery的?](http://stackoverflow.com/questions/9810641/how-to-differ-mouseout-leave - 事件並排在jQuery上) –

+0

似乎很奇怪你想要做什麼,如果用戶用快捷方式關閉標籤頁/瀏覽器(鼠標不離開正文)......不應該如果您在用戶離開頁面之前設置cookie,那麼效果會更好嗎? 'window.onbeforeunload = function(){return「你確定嗎?」} – Hatsjoem

回答

3

您可以使用e.offsetY並檢查它是否小於0.偏移量從元素的左上角計算,Y向下增加。如果e.offsetY小於0,則意味着事件在鼠標移動到具有附加事件處理程序的元素上時觸發。

如果頁面滾動,則需要考慮scrollTop值,因爲即使從屏幕頂部滾動,offsetY也將具有偏離元素頂角的偏移位置。

由於即使鼠標移出另一側,也會觸發事件,因此您不能使用.one(),而是可以添加一個條件來檢查事件是否已從頂部的「鼠標離開」觸發。

DEMO

triggered = false; 
$("body").on("mouseleave", function (e) { 
    if (e.offsetY - $(window).scrollTop() < 0 && !triggered) { 
     triggered = true; 
     alert("leave"); 
    } 
}); 
+0

Okey這很不錯,但是如果我的頁面在某個地方向下滾動,當我離開我的身體時,它感覺就像給了隨機數字,這種偏移是非常糟糕的。當我離開身體的頂端時,並不總是第一次工作。這是不可接受的解決方案,因爲我必須放置一個事件,所以如果它第一次不起作用,那麼它的左側掛起! – user2945241

+0

我已經試過這個....問題仍然存在於偏移本身內。我嘗試重新加載頁面並像在頁面中間一樣滾動頁面並離開頁面頂部邊界,我將從-50到100的隨機值設爲門,有時第一次有時像第10次那樣得到它。 Feedle在這裏:http:// jsfiddle。net/b2GEq/8/ – user2945241

+1

@ user2945241您可以取消offsetY值中的scrollTop值。更新我的答案,這裏是一個小提琴http://jsfiddle.net/b2GEq/9/ – Mathias

0

你可以使用jQuery試試這個:

$('#element').mouseout(function(e) { 
if (e.offsetY < 0) { 
// your event 
} 
}); 

編輯:編輯答案上底邊沒有-TR。沒有注意到這個問題!

+0

即使鼠標移出元素並穿過底部邊緣,也會觸發 –

+0

我編輯了我的答案,只有在穿過頂部邊境。 – Tarun

相關問題