11

This is making me crazy.

Is there a way to fire a mouseleave jquery effect only if leaving the div through its bottom border?

That is, preventing said effect from taking place if the mouse pointer leaves the div through any of the other 3 borders.

I guess it must be a coordinates issue of some sort, but neither position not offset seem like the answer to me.

If something like that can be done, just the tiniest of examples on how to do it would be greatly appreciated.

If a similar question has already been asked (and answered) any redirections will be appreciated as well.

Thanks!

Carlos Pardilla
  • 215
  • 3
  • 9

6 Answers6

20

How about this:

$("div").mouseleave(function(e){
    var $this = $(this);

    var bottom = $this.offset().top + $this.outerHeight();

   if(e.pageY >= bottom) alert("BOTTOM"); 
});

http://jsfiddle.net/uqcU6/6/

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • Actually want to use `offset` and not `position` in case the element is within a relative or absolutely positioned element. Answer update. – James Montagne Aug 02 '11 at 21:03
  • You may want to do `outerHeight` instead of `outerWidth` because the way you have it now, it only works if it's a square. Forked your fiddle: http://jsfiddle.net/hJCmB/ – ayyp Aug 02 '11 at 21:05
  • I've also submitted an edit because outerWidth should be outerHeight, in your jsfiddle this doesn't matter because it's a square, if you'd change it to a rectangle your code would break though. – Alexander Varwijk Aug 02 '11 at 21:06
  • @Andrew hah, thanks, typing too fast for my brain to keep up I guess. – James Montagne Aug 02 '11 at 21:07
  • I realized that Andrew Peacock is right after getting no results as soon as width and height weren't equal; using outerHeight did the trick. But you pointed me in the right direction, kingjiv, so thank you both. – Carlos Pardilla Aug 03 '11 at 00:13
  • This is amazing. I could even use this as vice versa way. – Chase Choi Apr 23 '18 at 08:41
2

For HTML

<div></div>

and CSS

div {
    border:2px dashed lightblue;
    width:200px;
    height:200px;
    margin:20px 0 0 20px;
}

and JavaScript

var divPosition = $('div').position();
var bottom = divPosition.top + $('div').height();
var left = divPosition.left;

$('div').mouseleave(function(e) {
    if (e.pageX > left && e.pageY > bottom) {
        console.log('bottom out');   
    }
});

or demo, a Console output will occur only when mouse leaves the bottom of the <div>

andyb
  • 43,435
  • 12
  • 121
  • 150
1

Simplest solution is to use a wrapper div and assign the mouseleave event to the wrapper.

http://jsfiddle.net/AlienWebguy/TDCgM/

AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • But that fires when the mouse leaves in all directions. OP wanted to know if it fired when leaving the bottom. – andyb Aug 02 '11 at 21:07
1

The quick solution would be to put a transparent div absolute positioned to the bottom of the element and then listen for a mouseenter on that div to trigger the mouseleave on the parent div.

locrizak
  • 12,192
  • 12
  • 60
  • 80
1

Another solution if you can't add another div would be to take the bottom y coordinates of the div in question. And check to see if the mouse was below that in the mouseleave event. You might have to check x1 < xm < x2, where x1 is the left x coordinate of your div and x2 is the right x coordinate of your div and xm is the x coordinate of your mouse.

@kingjiv beat me to it with a code-example, but the sidechecks might refine the whole thing.

Alexander Varwijk
  • 2,075
  • 18
  • 21
1

Add a conditional statement inside your mouseLeave handler that checks whether the mouse is lower than the bottom of the element. If it is, the mouse most likely exited through the bottom border.

example:

$("#yourDiv").mouseleave(function(e){
  if (e.offsetY >= $("#yourDiv").height() ){
    alert("perform the mouse leave action!");
  }

});

jake
  • 150
  • 1
  • 6