Проблемы с событием mouseout

Question

Я использую JavaScript, чтобы скрыть изображение и показать некоторый текст, который скрыт под ним.Но когда текст отображается при прокрутке по нему, он запускает событие mouseout в контейнере, которое затем скрывает текст и снова показывает изображение, и это просто переходит в странный цикл.

HTML-код выглядит примерно так:

<div onmouseover="jsHoverIn('1')"
     onmouseout="jsHoverOut('1')">
    <div id="image1" />
    <div id="text1" style="display: none;">
        <p>some content</p>
        <p>some more content</p>
    </div>
</div>

И javascript (он использует scriptaculous):

function jsHoverIn(id) {
  if(!visible[id]) {
    new Effect.Fade ("image" + id, {queue: { position: 'end', scope: id } });
    new Effect.Appear ("text" + id, {queue: { position: 'end', scope: id } });
    visible[id] = true;
  }
}
function jsHoverOut (id) {
  var scope = Effect.Queues.get(id);
  scope.each(function(effect) { effect.cancel(); });

  new Effect.Fade ("text" + id, {queue: { position: 'end', scope: id } });
  new Effect.Appear ("image" + id, {queue: { position: 'end', scope: id } });
  visible[id] = false;
}

Это кажется действительно простым, но я просто не могу уложить это в голове.

Answer 1

Я бы дал контейнеру div:

position: relative;

и добавьте третий div в контейнер (должен быть последним дочерним элементом контейнера) с:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

и вместо этого перехватывайте события mouseover и mouseout в этом div.

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

Редактировать:

Что, по моему мнению, происходит, так это то, что когда курсор перемещается с родительского элемента на дочерний элемент, событие mouseout происходит на родительском элементе, а событие mouseover - на дочернем элементе.Однако, если обработчик наведения курсора мыши на дочерний элемент не перехватит событие и не остановит его распространение, родительский элемент также получит событие наведения курсора мыши.

Answer 2

Похоже, на самом деле вы хотите, чтобы mouseenter/mouseleave (Т.е. проприетарные события, но их легко эмулировать):

// Observe mouseEnterLeave on mouseover/mouseout
var mouseEnterLeave = function(e) {
    var rel = e.relatedTarget, cur = e.currentTarget;
    if (rel && rel.nodeType == 3) {
        rel = rel.parentNode;
    }
    if(
        // Outside window
        rel == undefined ||
        // Firefox/other XUL app chrome
        (rel.tagName && rel.tagName.match(/^xul\:/i)) ||
        // Some external element
        (rel && rel != cur && rel.descendantOf && !rel.descendantOf(cur))
    ) {
        e.currentTarget.fire('mouse:' + this, e);
        return;
    }
};
$(yourDiv).observe('mouseover', mouseEnterLeave.bind('enter'));
$(yourDiv).observe('mouseout', mouseEnterLeave.bind('leave'));

// Use mouse:enter and mouse:leave for your events
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseenter' : 'mouse:enter', yourObserver);
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseleave' : 'mouse:leave', yourObserver);

В качестве альтернативы, патч prototype.js и использовать mouseenter и mouseleave с уверенностью.Обратите внимание, что я расширил проверку выхода из окна или входа в XUL chrome;мне показалось, что это исправило некоторые крайние случаи в Firefox.

Answer 3

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

if (bWasHoverIn){
   ...
}

Answer 4

Разве событие onmouseover не должно быть в разделе изображений, а событие onmouseout - в текстовом разделе?

Answer 5

@Ryan Логическое значение на самом деле не помогает, оно просто позволяет избежать цикла, но событие наведения курсора мыши все равно запускается, и текст скрывается.

@Брайан, раньше так и было, но он вел себя точно так же.

Answer 6

Я не уверен, подойдет ли это к остальной части вашего стиля, но, возможно, если бы вы изменили css в текстовом div, чтобы он был того же размера, что и изображение, или исправили размер внешнего div, то при срабатывании события наведения курсора размер внешнего div изменился бы не настолько сильно, чтобы вызвать событие mouseout.

Есть ли в этом смысл?