Jquery mouseleave эффект через нижнюю границу div

Question

Это сводит меня с ума.

Есть ли способ запустить эффект jquery при отпускании мышью, только если оставил div через его нижнюю границу?

То есть предотвращение указанного эффекта, если указатель мыши покидает div через любую из трех других границ.

Полагаю, это должна быть какая-то проблема с координатами, но ни позиция, ни смещение не кажутся мне ответом.

Если что-то подобное можно сделать, будет очень признателен за малейший пример того, как это сделать.

Если подобный вопрос уже был задан (и получен ответ), любые перенаправления также будут оценены.

Спасибо!

Answer 1

Как насчет этого:

$("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/

Answer 2

для HTML

<div></div>

и CSS

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

и 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');   
    }
});

или демо , вывод Console будет происходить только тогда, когда мышь покидает нижнюю часть <div>

Answer 3

Добавьте условный оператор в ваш обработчик mouseLeave, который проверяет, находится ли мышь ниже нижней части элемента.Если это так, мышь, скорее всего, вышла через нижнюю границу.

пример:

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

});

Answer 4

Другое решение, если вы не можете добавить еще один div - это взять нижние y координаты рассматриваемого div. И проверьте, была ли мышь ниже, чем в событии mouseleave. Возможно, вам придется проверить x1 @ kingjiv опередил меня с помощью примера кода, но боковые проверки могут уточнить все это.

Answer 5

Быстрое решение состоит в том, чтобы поместить прозрачный абсолютный div, расположенный в нижней части элемента, и затем прослушать mouseenter на этом div, чтобы вызвать mouseleave на родительском div.

Answer 6

Самое простое решение - использовать div обертки и назначить событие mouseleave обертке.

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