onMouseOver keine bestimmte Funktion auslösen

Ich habe ein sehr verwirrendes Problem und ich Frage mich, ob jemand kann etwas Licht auf, es.

Ich habe ein DIV-element ...

<div onmouseout="scrollRight();" onmouseover="scrollLeft();" id="rightScrollRegion" class="ScrollRegion"></div>

Und eine externe Skript-Datei, ...

function scrollLeft(){
        document.getElementById('rightScrollRegion').style.background = "#0000ff";
    }

    function scrollRight(){
        document.getElementById('rightScrollRegion').style.background = "#ff0000";
    }

Das problem ist, dass das onmouseover-scheint nicht zum Aufruf der Funktion scrollLeft(); oder scrollRight(); I don ' T scheinen zu verstehen, wo ich einen Fehler gemacht.

Ich habe einige Tests um zu sehen, ob es etwas in der Funktion...

Fenster.onload = function(){

scrollLeft();

}

Arbeitet in der externen Datei und ändert die DIV-hintergrund, wenn die pageloads ... so funktioniert.

Habe ich auch versucht zu verändern, was heißt in onmouseover ...

<div onmouseover="alert('Hello');" id="rightScrollRegion" class="ScrollRegion"></div>

druckt ein alert-Fenster einfach nur gut.

Also dachte ich, vielleicht konnte ich nicht den hintergrund ändern mit onmouseover und so versuchte ich ...

<div onmouseover="this.style.background = '#0000ff'" id="rightScrollRegion" class="ScrollRegion"></div>

Und Veränderungen im hintergrund, wie erwartet.

Aber aus irgendeinem Grund kann ich nicht meine Funktion auslösen, auf die DIV. Ich habe die Suche überall im internet und ich habe keine waren nicht in der Lage zu finden, eine Lösung für das Problem. Ich kann nicht scheinen, um herauszufinden, was ich falsch mache. Ich habe externe Funktionen in anderen Seiten, aber nie mit einem onmouseover-also ich bin mir nicht sicher, was könnte das Problem sein.

Jegliche Hilfe würde sehr geschätzt werden.

Haben Sie sah in der Verwendung von jquery? Es ist design, um zu verarbeiten, was Sie tun mehr leicht. Warum das Rad neu erfinden? Und warum setzen Sie event-Handler in der DOM?????
Ist dein Skript geladen ist, bevor oder nach den div geladen wird?
-frenchie ich dachte über die Verwendung von jQuery, aber ich habe es nie benutzt, bevor. Ich könnte haben zu schauen es trotzdem. Das Endziel ist komplizierter, aber ich vereinfacht es für dieses post und so konnte ich versuchen zu isolieren, was schief läuft. -Asad-ich lade das Skript, bevor Sie etwas in das HTML geladen wird.
Haben Sie versucht, mit addEventListener?

InformationsquelleAutor determinedto3d | 2012-11-17

  1. 4

    Versuchen Sie dies:

    element = document.getElementById('rightScrollRegion');
element.addEventListener("mouseover",function(){
    this.style.background = "#0000ff";
});
element.addEventListener("mouseout",function(){
    this.style.background = "#ff0000";
});

    Vermeiden Sie die Verwendung von inline-event-Handler. Verwenden Sie die addEventListener Methode zum anfügen von Ereignishandlern zu Elementen.

    Können Sie versuchen, diese hier: http://jsfiddle.net/gkvq8/

    Dies schien zu funktionieren, wie gut. Danke!!! Gibt es einen Grund, inline-Event-Handler sind schlecht?
    Ja, Sie bulk-up Ihre HTML-und sind schwer zu pflegen, und sind im Gegensatz zu separation of concerns.

    InformationsquelleAutor Asad Saeeduddin

  2. 2

    Können Sie versuchen, diese:

    hier ist das HTML-Element:

    <button onmouseover="mousein(event)" onmouseout="mouseout(event)">hello</button>

    und Funktionen:

    function mousein(event){
    event.target.style.background="#FF0000";
}

function mouseout(event){
    event.target.style.background="#FFFFFF";
}

    Sollten Sie Zugriff auf das element mit dem 'event' - Objekt. Es gibt bessere Wege, dies zu tun, sollten Sie die Forschung über 'dezent' javascript. hier

    Vielen Dank für die Beratung! Ich werde in diesem Blick.

    InformationsquelleAutor Ian Calderon

  3. 1

    Wenn Sie können, verwenden Sie jQuery. Es wird Ihr Leben viel einfacher und Ihr code eine ganze Menge mehr flexibel.

    Verwenden die jQuery-Bibliothek nur diese in Ihre HMTL:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

    Etwas wie dies zu tun:

    $('div').mouseover(function() {
    $('div#rightScrollRegion').attr("style","background-color:#0000ff;");
});

$('div').mouseout(function() {
    $('div#rightScrollRegion').attr("style","background-color:#ff0000;");
});

    Idealerweise verwenden Sie addClass und removeClass zum ändern der Hintergrundfarbe des div ' s, aber dies ist nur ein einfaches Beispiel-Lösung.

    Ernsthaft? 32kB Lösung für ein problem von ein paar bytes?
    1,5 Jahre später und mit viel mehr Erfahrung auf dem Buckel, ich sehe, dies ist eine unnötige Verwendung von jQuery, +1
    Sie sind wellcome : D. Aussieht habe ich einen Tippfehler in meinem Kommentar, soll 92 kB ; ).
    Wahrscheinlich waren die Referenzierung der minified und gzipped Größe 🙂

    InformationsquelleAutor Ryan Brodie

  4. 1

    Ihre Funktion ist im Gegensatz zu den ursprünglichen javascript-Funktion
    so ändern Sie den Namen der Funktion, wie diese:

    <div language="javascript" onmouseout="funcTwo()" onmouseover="funcOne()" id="rightScrollRegion" class="ScrollRegion"></div>

    und diese

    function funcOne(){
        document.getElementById('rightScrollRegion').style.backgroundColor = "#0000ff";
    }
    function funcTwo(){
        document.getElementById('rightScrollRegion').style.backgroundColor = "#ff0000";
    }
    Also ich habe es ausprobiert, und ist immer noch nicht aufrufen der externen Funktion. onmouseover="this.Stil.background = '#0000ff'" ist nicht wirklich das Problem, obwohl ... seine onmouseover="scrollLeft();" ...
    Ihre Funktion ist Gegenteil mit original JS-Funktion so ändern Sie den Namen der Funktion, nicht verwenden scrollLeft() und scrollRight()
    Danke! Das klappte! Ich war mir nicht bewusst, dass es wurde eine Funktion aufgerufen, die bereits. Vielen, vielen Dank!
    Diese (faid) sollte die Antwort sein, denke ich. Ist es richtig das problem erkannt, im Gegensatz zu nur mit einer potenziell bessere stilistische option. Es könnte die Kombination mit einem vorhandenen Namen und setzen, dass in einer externen Datei, da Sie sonst neu definieren Namen.
    [Klärung früheren Kommentar da lief die Zeit ändern...] Diese (faid) sollte die Antwort sein, denke ich. Ist es richtig das problem erkannt, im Gegensatz zu nur mit einer potenziell bessere stilistische option. Das problem wurde möglicherweise die Kombination von re-mit einem vorhandenen Namen und setzen dieses neue definition in einer externen Datei (da Sie sonst neu definieren-Namen), so dass es nicht gesehen zum Zeitpunkt der Bindung.

    InformationsquelleAutor faid

Schreibe einen Kommentar