Probleme mit dem Mouseout-Ereignis

Question

Ich verwende JavaScript, um ein Bild auszublenden und den darunter verborgenen Text anzuzeigen.Wenn jedoch der Text angezeigt wird, wenn Sie darüber scrollen, wird das Mouseout-Ereignis für den Container ausgelöst, das dann den Text verbirgt und das Bild wieder anzeigt, und es kommt einfach zu einer seltsamen Schleife.

Der HTML-Code sieht so aus:

<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>

Und das Javascript (es verwendet 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;
}

Das scheint wirklich einfach zu sein, aber ich kann es einfach nicht verstehen.

Answer 1

Ich würde dem Container div geben:

position: relative;

und fügen Sie ein drittes Div im Container hinzu (sollte das letzte untergeordnete Element des Containers sein) mit:

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

und fangen Sie stattdessen die Mouseover- und Mouseout-Ereignisse auf diesem Div ab.

Da es keine untergeordneten Elemente enthält, sollten sich keine falschen Mouseover- und Mouseout-Ereignisse darauf übertragen.

Bearbeiten:

Was meiner Meinung nach passiert, ist, dass, wenn sich der Cursor von einem übergeordneten Element auf ein untergeordnetes Element bewegt, ein Mouseout-Ereignis auf dem übergeordneten Element und ein Mouseover-Ereignis auf dem untergeordneten Element auftritt.Wenn jedoch der Mouseover-Handler des untergeordneten Elements das Ereignis nicht abfängt und seine Weitergabe nicht stoppt, empfängt das übergeordnete Element auch das Mouseover-Ereignis.

Answer 2

Es hört sich so an, als ob das, was Sie wirklich wollen, das ist mouseenter/mouseleave (IE-proprietäre Ereignisse, aber einfach zu emulieren):

// 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);

Alternative, Patch-Prototyp.js und verwenden mouseenter Und mouseleave mit Zuversicht.Beachten Sie, dass ich die Prüfung für das Verlassen des Fensters oder das Betreten von XUL Chrome erweitert habe;Dies schien für mich einige Randfälle in Firefox zu beheben.

Answer 3

Dies ist möglicherweise nicht die beste Lösung, aber Sie könnten eine globale boolesche Variable festlegen, auf die beide Methoden zugreifen können und die lediglich angibt, ob die letzte Aktion HoverIn oder HoverOut war.Sie können diese boolesche Variable verwenden, um zu bestimmen, ob der Code ausgeführt werden soll oder nicht.

if (bWasHoverIn){
   ...
}

Answer 4

Sollte sich das Onmouseover-Ereignis nicht auf dem Bild-Div und das Onmouseout-Ereignis auf dem Text-Div befinden?

Answer 5

@Ryan Der boolesche Wert hilft nicht wirklich, er vermeidet nur die Schleife, aber das Mouseover-Ereignis wird trotzdem ausgelöst und der Text wird ausgeblendet.

@Brian Früher war es so, aber es verhielt sich genauso.

Answer 6

Ich bin mir nicht sicher, ob das zum Rest Ihres Stils passen würde, aber wenn Sie vielleicht das CSS des Text-Divs so geändert hätten, dass es die gleiche Größe wie das Bild hätte, oder die Größe des äußeren Divs festgelegt hätten, dann wäre das beim Mouseover der Fall Wenn das Ereignis ausgelöst wird, ändert sich die Größe des äußeren Div nicht so sehr, dass das Mouseout-Ereignis ausgelöst wird.

Macht das Sinn?