[JS] Buttons wiederholen Funktion?

  • Hey,


    ich sitze gerade an einem kleinen Menü, doch es gibt ein Problem ..
    Das Menü wird mit JavaScript erstellt.
    Anschließend wollte ich Buttons diesen Menüpunkten zuteilen per JavaScript.


    Das Menü ist so aufgebaut, dass 5 Elemente in einem "menue"-Element sind. Diese 5 Elemente (MI1-5) haben ein onmouseover- (dropdown()) und onmouseoutEvent (dropup()).
    Danach wollte ich die Menüunterpunkte als Buttons erstellen und hinzufügen ..
    Die beiden Funktionen funktionieren soweit aber wenn ich nun in einem der Elemente über einen Menüpunkt, also einen Button fahre, wieder die dropup() function ausgeführt und die dropdown() wird wiederholt .. Die Buttons haben aber keine functions ..
    Hatte es auch mit Links versuchst aber da ist es genau das Gleiche ..


    Wie kann ich jetzt meinem Menüpunkten die Buttons so zuweisen, dass sie diesem Element angehören?
    Ich denke mal das passiert weil der Button oder die Links ein neues Objekt darstellen, oder?


    Es gibt leider auch nichts in der Konsole was mir helfen könnte ..


    Hier der betreffende Quellcode:

  • also so geschichten macht man wesentlich besser mit jQuery.
    dein problem ist wahrscheinlich, dass des event-bubbling zu deinem nachteil wird (ich vermute einfach mal, dass events ohne jquery genauso bubblen, wie mit)
    will sagen du kloppst elemente in ein div, auch wenn du in dieses div andere elemente reinlegst wird wahrschenlich ein klick auf ein kind-element ebenso ein klick auf das umschliessende div sein.


    aber: ein menü mit javascript zu erstellen ist eigentlich so fruchtbar wie eine flashseite fürs ipad zu machen :P

  • Danke für deine Antwort.


    Könntest du mir vielleicht sagen wie ich ein onmouseover Event abfragen kann?
    Hab schon gegoolet aber da finde ich immer nur das aufrufen einer Funktion mit functioname(e.type) zum beispiel aber das bringt mir nicht viel :/


    Also sprich das ich abfragen kann, ist eines der child-Element onmouseover?


    Hatte gerade selber bisschen ausprobiert und in etwa sowas gebastelt:



    Funzt aber leider nicht ..
    Oder kann ich es mit document.getElementById(closeItem).childNodes[i] = Event.onmouseover versuchen?, Hm :/


    Das mit dem Klick auf das umschließende Div ist irrelevant bei mir ^^

  • der klick auf das div ist ja auch nur das beispiel gewesen, das is des gleiche system bei ALLEN events.


    also an dein element kommste doch via myBtn dran oder nich? will sagen während du es erstellst und in einer variablen hast kannst du dem ding zum einen eine eigene ID geben und zum anderen dort dann auch anbinden.


    Code
    1. myBtn.onmouseover = function(){
    2. //do heroic stuff in here
    3. }
  • Ja das ist klar meine Buttons haben ja auch ne ID ^^
    Aber ich möchte in einer ganz anderen Funktion abfragen ob die Buttons "gehovert" werden..


    Halt in der dropup() function.
    Also ParentElement onmouseout -> child Element onmouseover? -> ja?-return, nein?-schließe parent


    Und myBtn befindet sich in der tool.js. Die Menüfunktionen sind in der dropdown.js ^^

  • ja dann nutz doch die id.. :P
    dafür is die ja da. und dass du hier mit zwei files arbeitest hatte mir meine glaskugel verschwiegen, ich muss die wohl umtauschlichen, die sau..^^
    ich denke dafür solltest du mit zwei kontrollvariablen arbeiten einmal für parent und einmal fürs child.


    und dann die beiden vars abfragen ;) wird wohl nich ohne globalisierung gehen
    aber ich bleibe dabei du machst dir hier sowas von das leben schwer, mit jQuery wär es weniger :)

  • mmh hilfreiche artikel. näh ich habs in medias res gelernt. eifach mal ne bildergalerie damit bauen :)


    is im prinzip voll easy.
    1.) die selektoren um ein objekt zu bekommen oder ein array von objekten is wie bei CSS musste nur nen $() drum wrappen oder nen jQuery() (dollarzeichen is das short-tag für jQuery, wenn man es benutzt. also im css #meineID wird zu $('#meineID).
    2.) benutzen wie normales javascript, nur eben einfacher :)
    3.) man kann mehrere funktionen verbinden (chaining nennt man des) also: $('#meineID).slideup().css('height', '20px');


    http://oscarotero.com/jquery/ mal als funktionsübersicht zur doku :)

  • Kann ich jQuery einfach in JavaScript Quellcode schreiben?
    Also sowas wie


    Code
    1. <script type="text/javascript">
    2. function example(closeItem) {
    3. while(i < childCount) {
    4. if(event.target == document.getElementById(document.getElementById(closeItem).childNodes[i])) {
    5. return
    6. }
    7. }
    8. }
    9. </script>
  • klar das is nur ne javascript-bibliothek :)



    HTML
    1. <script type="text/javascript">
    2. function example(closeItem) {
    3. while(i < childCount) {
    4. if(event.target == $('#closeItem').children().first().attr('id')) {
    5. return
    6. }
    7. }
    8. } </script>


    holt dann vom closeItem das erste kind und vergleicht die id mit dem event.target :)

  • Also das ganze sieht bei mir jetzt so aus:



    Habe es auch schon versucht mit $("input").onmouseover(function(event) { return; }); aber das funzt auch nicht.


    Das Problem ist bei mir nun, dass sobald ich einmal etwas gehovert habe nichts mehr geht.
    Neuladen geht nicht mehr über F5 oder STRG+F5, irgendetwas anderes hovern auch nicht, die Seite ist einfach tod und die Konsole bleibt leer :/

  • Ok hier mal der vollständige Sourcecode:


    tools.js (hier wird Menü erstellt und im späteren Verlauf werden dort alle Menüunterpunkte als Buttons hinzugefügt)


    createMenue() wird beim onload Event vom body ausgeführt.



    So dann gibt es noch die dropdown.js, dort sind die functions verfügbar, welche mouseover- und mouseoutEvent der Divs MI1 bis MI5 behandeln ^^


    Das ist eigentlich alles.
    Klassenbibliothek von jQuery ist ebenfalls eingebunden (Version 1.7)..



    Meine Güte das ist das Grundgerüst und ich stürz schon total ab xD

  • HTML
    1. <div style="height: 30px; margin-top: 0px;" id="MI5" class="menue_item" onmouseover="dropdown(this.id); return false;" onmouseout="dropup(this.id); return false;">Login<br><br></div>


    Das wird generiert... ist das richtig so? Oder sollte da wo this.id steht nicht die tatschliche id stehen?

  • hey bleistift, also ich bin heute abend noch nicht dazu gekommen dein script zu reviewen, aber was ich dir bisher mit sicherheit sagen kann ist dass "event" bei dir nicht bekannt ist


    HTML
    1. function dropup(closeItem) { var i = 0; var chCount = document.getElementById(closeItem).childNodes.length; while(i != chCount) { if(event.target == $('#' + closeItem).children().eq(i).attr('id')) { alert("true"); // tritt niemals ein return; } i++; }


    du müsstest wenn das event als ersten funktionsparameter durchschleifen.

    HTML
    1. function dropup(e, closeItem)


    dann kannste das mouse-event auch über den parameter auslesen..


    sei bitte so gut und schreib mal in normalen worten auf, was du da vor hast also insgesamt bei deinem script (nicht nur in der funktion dort),
    ich hab so das gefühl dass du nen dicken denkfehler hast.


    dass du mit jquery noch nichts gemacht hast soll hier mal aussen vor bleiben, das wird schritt 2 oder 3 ;)

  • Ich find jQuery echt spannend und sieht sehr viel versprechend aus.
    Habe mich dort mal etwas eingefunden aber funktionieren tut noch nicht viel :D Wird schon!


    Also zu meiner Denkweise:


    5 Elemente (MI1 bis MI5) im MainContainer "menue" welche per JavaScript (createMenue()) erstellt werden.
    Diese 5 Elemente besitzen ein mouseover- und mouseoutEvent.
    Beim mouseOverEvent soll sich das Element nach oben ziehen und nach unten ausklappen (funktioniert soweit!)
    Wenn ich nun aber andere Objekte in den Elementen MI1 bis MI5 habe, erhalten diese die gleiche Eventfunktion vom Parent.
    Sprich wenn man den Button für ein Menüpunkt hovert, wird dropup() ausgeführt, da das ParentElement ein mouseout-Event unterfällt.
    Anschließend wird lustiger Weise dropdown() erneut ausgeführt und das ganze klappt sich wieder aus. Selbst wenn ich meinen Buttons beim mouseoverEvent null zuweise oder eine leere function.


    Zum "event" - Parameter, das kann ich doch nicht einfach in der function als ersten Parameter benutzen, weil ich doch gar keinen 2. übergebe also sprich ich müsste dann immer die function dropdown() beim hovenr der 5 Elemente mit 2 Parametern aufrufen, also dropdown(e.currentTarget, this.id); return false; ?


    Danke für deine Hilfe ich hoffe ich reiz deine Nerven nicht zu sehr :D

  • sorry stift, dass ich momentan so wenig zeit habe...
    hab dir mal was vorbereitet, es ist nicht das ganze script, die hauptfunktion fürs dropping musste noch machen.
    aber ich hab dir mal im jquery-style dein menü soweit mal vorbereitet.


    eventuell hilft es dir ja mal nen anstoss zu finden :)


    wollte dich jetzt nicht warten lassen, bis ich es fertig habe, sondern dir schomma nen zwischenstand bieten.
    wenn du fragen hast nur raus damit