JavaScript mouseover/mouseout-Problem mit child-element

Habe ich dieses kleine problem und ich bitte um Ihre Hilfe.
Ich habe eine div element, in dem ich eine img element, wie dies

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
    <img id="child" src="button.png" style="visibility: hidden" />
</div>

<script type="text/javascript">
    function MyFuncHover() {
        //Here I have some code that makes the "child" visible
    }

    function MyFuncOut() {
        //Here I have some code that makes the "child" invisible again
    }
</script>

Als Sie, sehen, das Bild ist ein Kind der div. Ich will das nur wenn ich aus der div, das Kind zu verschwinden. Doch wie es aussieht, wenn ich mit der Maus über das Bild, das MyFuncOut () - Funktion aufgerufen wird (denn ich nehme an, ich lasse das div, indem man die Maus im Bild). Ich will nicht, dass das passiert. Ich will die MyFuncOut() Funktion nur aufgerufen werden, wenn ich lassen Sie die div Bereich.

Ich wusste nicht, dass, wenn Sie mit der Maus über ein Kind, Kontrolle, Eltern fordert, das mouseout-Ereignis (auch wenn ich mich über das Kind, ich bin immer noch über die Eltern auch). Ich bin in diese Falle geraten und ich brauche ein wenig an Ihre gute Beratung. Danke!

ÄNDERUNGEN

O. K. Ereignis-bubbling " nicht senden "mouseout" - Ereignis an die Muttergesellschaft, wenn ich "mouseout", das Kind. Es wird auch nicht senden die "mouseover" - Ereignis an die Muttergesellschaft, wenn ich "mouseover", das Kind. Das ist nicht das, was ich brauche. Ich brauche das "mouseout" - Ereignis des Elternteils, der nicht gesendet werden, wenn ich "mouseover", das Kind. Es bekommen? Ereignis-bubbling ist nützlich, wenn ich nicht will, zum Beispiel ein click-Ereignis auf das Kind weitergegeben werden an die Eltern, aber das ist nicht mein Fall. Was ist komisch ist, dass ich andere Elemente, die im inneren die gleichen Eltern, die kein Feuer, das "mouseout" - Ereignis des Elternteils, wenn ich "mouseover".

InformationsquelleAutor ali | 2012-05-16

  1. 23

    können Sie "mouseenter" und "mouseleave" Ereignisse in jquery, hier ist der code unten,

    $(document).ready(function () {
        $("#parent").mouseenter(function () {
            $("#child").show();
        });
        $("#parent").mouseleave(function () {
            $("#child").hide();
        });
    });

    oben ist, befestigen Sie ein Ereignis,

    <div id="parent">
    <img id="child" src="button.png" style="display:none;" />
</div>
    Ich will es tun, mit JavaScript nur, trotzdem danke, könnte eine Letzte Lösung.
    Sie sind erhältlich in den Prototyp als auch durch die Art und Weise ...
    Yeah ! es funktioniert Super ! 😀
    mouseleave ist eigentlich ein einfachen javascript-event, so können Sie ignorieren die jQuery-Teil und es einfach verwenden, direkt. der einzige Unterschied zwischen ihm und mouseleave ist es nicht die Blase, so dass das Kind mouseleave wird nicht dazu führen, die Eltern, die zum gleichen Ereignis.

    InformationsquelleAutor Vishal Gowda

  2. 6

    Können Sie die folgende Lösung, welche es ist reines javascript und ich mit Erfolg verwendet.

    var container = document.getElementById("container");
var mouse = {x: 0, y: 0};

function mouseTracking(e) {
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY;
    var containerRectangle = container.getBoundingClientRect();

    if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right &&
            mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) {
        //Mouse is inside container.
    } else {
        //Mouse is outside container.
    }
}
document.onmousemove = function () {
    if (document.addEventListener) {
        document.addEventListener('mousemove', function (e) {
            mouseTracking(e);
        }, false);
    } else if (document.attachEvent) {
        //For IE8 and earlier versions.
        mouseTracking(window.event);
    }
}

    Ich hoffe, es hilft.

    Danke...ich denke, es ist sehr gute Lösung, weil es kann verwendet werden, mit addEventListener () für die dynamische Bindung Ereignis für die Elemente

    InformationsquelleAutor Pedro Alvares

  3. 3

    Nur eine if-Anweisung hinzufügen Ihre MyFuncOut Funktion, die überprüft, das Ziel ist nicht die Bild

    if (event.target !== imageNode) {
     imageNode.style.display = 'none'
}
    Ich sehe es nicht funktioniert, vielleicht bin ich nicht, es umzusetzen.
    hier ist eine demo, jsfiddle.net/HvMjN/4 mit der Methode die ich oben gesprochen wurde etwa. Es stellt sich heraus, das moderne Ereignis mouseout und mouseenter haben die Verhalten Sie ursprünglich erwartet, so dass Sie können verwenden Sie Ihre code-ändern Sie einfach die event-Typen, jsfiddle.net/HvMjN/6
    Danke Mann, das problem ist nur, es funktioniert nicht auf IE6 (Fehler: Objekt unterstützt keine Eigenschaft oder Methode 'addEventListener'). Doch, ich denke, dass kann gelöst werden, indem die direkt übergeordnete.onmouseover
    suchen Sie einfach cross-browser-Veranstaltung verbindlich. ie6 verwendet attatchEvent

    InformationsquelleAutor Jake

  4. 1

    Ich habe Probleme mit diesem zu und konnte es nicht bekommen, um zu arbeiten. Dies ist, was ich Tat, statt. Es ist viel einfacher und ist nicht JavaScript, so dass es schneller und kann nicht ausgeschaltet werden.

    div.container {
    opacity:0.0;
    filter:alpha(opacity="00");
}

div.container:hover {
    opacity:1.0;
    filter:alpha(opacity="100");
}

    Können Sie auch die CSS3-transition für die Deckkraft, um es geben eine glattere Gefühl.

    Oder einfach nur geben Sie es visibility:hidden auf das normale und Sichtbarkeit:sichtbar auf hover.
    Ich brauche bei der Arbeit mit IE6 auch. Dank
    Dies funktioniert auch in IE6
    Stellt Deckkraft und filter arbeiten auf IE6? Ich dachte, das ist es nicht.
    Dieser filter:alpha(opacity="100"); ist für den IE, die andere für alle anderen browser.

    InformationsquelleAutor Spencer May

Schreibe einen Kommentar