Как я могу вызвать событие mouseout для двух элементов в jQuery? - PullRequest
Новая
       33

Как я могу вызвать событие mouseout для двух элементов в jQuery?

13 голосов
/ 19 декабря 2011

Предположим, у меня есть два отдельных div, A и B, которые перекрываются в углу: 

+-----+
|     |
|  A  |
|   +-----+
+---|     |
    |  B  |
    |     |
    +-----+

Я хочу вызвать событие, когда мышь оставляет и A и B.

Я пробовал это 

$("#a, #b").mouseleave(function() { ... });

Но это вызывает событие, если мышь покидает какой-либо узел.Я хочу, чтобы событие было запущено, когда мышь не находится над узлом.

Есть ли простой способ сделать это?У меня была идея, заключающаяся в том, что глобальные переменные отслеживают состояние мыши по каждому элементу div, но я надеялся на что-то более элегантное.

Ответы [ 3 ]

18 голосов
/ 19 декабря 2011

Я постоянно сталкиваюсь с этой проблемой, и мое «быстрое решение», если оно соответствует тому, что я делаю, заключается в следующем: 

var timer;

$("#a, #b").mouseleave(function() {
    timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
    clearTimeout(timer);
});


function doSomething() {
    alert('mouse left');
}

Fiddle: http://jsfiddle.net/adeneo/LdDBn/

3 голосов
/ 12 июля 2013

Если вы вложите второй контейнер в первый, нет необходимости в сложном решении jQuery:

http://jsfiddle.net/5cKSf/3/

HTML 

<div class="a">
    This is the A div
    <div class="b">
        This is the B div
    </div>
</div>

CSS 

.a {
    background-color: red;
    width: 100px;
    height: 100px;
    position: relative;
}

.b {
    background-color: blue;
    width: 100px;
    height: 100px;
    position:absolute;
    top: 50px;
    left: 50px;
}

JS 

$('.a').hover(function() {
   alert('mouseenter'); 
}, function() {
   alert('mouseleave');
});
0 голосов
/ 19 декабря 2011

Я думаю, что вы можете достичь этого, используя что-то вроде: 

var mouseLeftD1 = false;
var mouseLeftD2 = false;

$('#d1').mouseleave(function() {
  mouseLeftD1 = true;
  if(mouseLeftD2 == true) setTimeout(mouseLeftBoth, 10);
}).mouseenter(function() {
  mouseLeftD1 = false;
});

$('#d2').mouseleave(function() {
  mouseLeftD2 = true;
  if(mouseLeftD1 == true) setTimeout(mouseLeftBoth, 10);
}).mouseenter(function() {
  mouseLeftD2 = false;
});

function mouseLeftBoth() {
  if(mouseLeftD1 && mouseLeftD2) {
    // .. your code here ..
  }
}
...