3

I was wondering if there is a way to capture some kind of mouse event or another event when the mouse leaves body crossing top border?

Well I have this campaign at my site when the user leaves body element and cookie is not set I show them this popup for one time only. But this event triggers for all sides of body.

tr = trigger event on leave

I woule like:

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

But i have

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

I have something like this:

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

My question is if there is a way to trigger this event only when the user leaves body by top border, but not for other borders?

Tom Walters
  • 15,366
  • 7
  • 57
  • 74
user2945241
  • 360
  • 5
  • 19
  • possible duplicate of [How to differ mouseout/leave events by side on jquery?](http://stackoverflow.com/questions/9810641/how-to-differ-mouseout-leave-events-by-side-on-jquery) – Karlen Kishmiryan May 21 '14 at 07:07
  • Seems strange what you're trying to do, what if the user closes the tab/browser with a shortcut (mouse doesn't leave the body)... Shouldn't it be better if you set the cookie before the user leaves the page? `window.onbeforeunload = function(){return "are you sure?"}` – bobthedeveloper May 21 '14 at 07:15

2 Answers2

4

You could use e.offsetY and check if it is less than 0. The offset is calculated from the upper left corner of the element with Y increasing downwards. If e.offsetY is less than 0 it means the event was triggered when the mouse moved above the element with the eventhandler attached.

If the page is scrolled you need to take the scrollTop value into account as the offsetY will have the offset position from the elements top corner even if that is scrolled off the top of the screen.

Since the event will be fired even if the mouse moved out on the other side you can't use .one() but instead you could add a condition to check if the event has been triggered from a "mouse leave" on the top.

DEMO

triggered = false;
$("body").on("mouseleave", function (e) {
    if (e.offsetY - $(window).scrollTop() < 0 && !triggered) {
        triggered = true;
        alert("leave");
    }
});
Mathias
  • 5,642
  • 2
  • 31
  • 46
  • Okey this is pretty good, but that offset is awful, if my page is scrolled somewhere down, when i leave my body it feels like it is giving random numbers. And not always works on first time when i leave crossing top side of the body. This is not acceptable solution, because i have to put one event, so if it does not work on first time than its left hanging ! – user2945241 May 21 '14 at 07:44
  • I already tried this....problem still lies within the offset itself. I tried reloading the page and scrolling like in the middle of page and leave page crossing top border, i gate random values from -50 to 100, sometimes it gets it right the first time sometimes like in the 10th. Feedle here: http://jsfiddle.net/b2GEq/8/ – user2945241 May 21 '14 at 07:59
  • 1
    @user2945241 You can take off the scrollTop value from the offsetY value. Updated my answer and here is a fiddle http://jsfiddle.net/b2GEq/9/ – Mathias May 21 '14 at 08:14
  • That Sir! is the correct answer...Please write the answer so i could answer! – user2945241 May 21 '14 at 08:38
  • @user2945241 I have updated my answer and included a section about the scrollTop value – Mathias May 21 '14 at 08:48
  • @user2945241 Please, vote for my answer if it solved your problem :) – Mathias May 21 '14 at 09:07
  • @Mathias this is gold! however I just noticed that on Microsoft edge(I hate edge -_-) this does not work. I switched out if (e.offsetY - $(window).scrollTop() < 0 && !triggered) for if (e.offsetY - $(document).scrollTop() < 1 && !triggered) is there some reason why using $(document) would be advised against? – GeneralCan Jun 13 '16 at 21:22
  • @GeneralCan Not really. It should be the same. See this http://stackoverflow.com/questions/5371139/window-scrolltop-vs-document-scrolltop – Mathias Jun 13 '16 at 21:24
  • If you arrived here like me looking for an answer for when user leaves the browser window . . . use `e.clientY` as it calculates from the top left of the browser window regardless of scroll. . . and it doesn't depend on jQuery. . .reviewers please ignore the edit I just submitted to the accepted answer - I re-read OP question and s/he had asked about targeting an element as opposed to the browser window, so the accepted answer is correct. – dot-punto-dot Jul 13 '16 at 02:19
0

You can try this with jquery:

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

EDIT: edited answer to no-tr on bottom edge. Didn't notice that in question!

Tarun
  • 631
  • 7
  • 19