Jeena Paradies: addEventListener und return false;

Hallo,

Ich habe einen Button, wobei Buttons normalerweise einen submit auslösen wenn sie geklickt werden:

var button = document.createElement("button");  
var text = document.createTextNode("mybutton");  
button.appendChild(text);  
button.addEventListener("click", function() { alert("test"); return false; }, true);

Das möchte ich verhindern und habe deshalb dieses return false; eingebaut, leider wird das nicht beachtet weil EventListener wohl keinen return-value haben.

Hat jemand dafür einen Lösungsansatz (außer global und außer anstatt Button einen Link oder so nehmen)?

Grüße
Jeena Paradies

--
Pavatar Zwischenstand Gravatar ist ja wieder kaputt | Jlog | Gourmetica Mentiri
  1. Ich habe einen Button, wobei Buttons normalerweise einen submit auslösen wenn sie geklickt werden:

    Nein, nur submitbuttons lösen einen submit aus, bei Buttons passiert nichts.

    Das möchte ich verhindern und habe deshalb dieses return false; eingebaut, leider wird das nicht beachtet weil EventListener wohl keinen return-value haben.

    Die Events schon, nur die Funktion addEventListener gibt keinen Wert zurück.

    Hat jemand dafür einen Lösungsansatz (außer global und außer anstatt Button einen Link oder so nehmen)?

    eine submit button verwenden.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. n'abend,

      Nein, nur submitbuttons lösen einen submit aus, bei Buttons passiert nichts.

      das wage ich zu bezweifeln. Hier wird beim Klick auf einen _button_ definitv das Formular abgeschickt. Der Button wurde auf folgende Art und Weise erschaffen: var button = document.createElement('button');

      Die Events schon, nur die Funktion addEventListener gibt keinen Wert zurück.

      addEventListener registriert ja auch nur ein übergebenes Objekt als EventHandler (von mir aus auch -Listener), es führt diesen nicht aus.

      weiterhin schönen abend...

      --
      Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
      sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
      1. Nein, nur submitbuttons lösen einen submit aus, bei Buttons passiert nichts.

        das wage ich zu bezweifeln. Hier wird beim Klick auf einen _button_ definitv das Formular abgeschickt. Der Button wurde auf folgende Art und Weise erschaffen: var button = document.createElement('button');

        OK stimmt, benutze ich nie, ich dachte an type="button"

        Die Events schon, nur die Funktion addEventListener gibt keinen Wert zurück.

        addEventListener registriert ja auch nur ein übergebenes Objekt als EventHandler (von mir aus auch -Listener), es führt diesen nicht aus.

        Eben, aber der event kann durchaus einen Rückgabewert haben und der bewirkt auch etwas, allerdings in dem Falle nicht das ein submit verhindert wird, dass erreichst du in dem du dem Formular einen onsubmit Handler spendierst.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        1. n'abend,

          Eben, aber der event kann durchaus einen Rückgabewert haben und der bewirkt auch etwas, allerdings in dem Falle nicht das ein submit verhindert wird, dass erreichst du in dem du dem Formular einen onsubmit Handler spendierst.

          wir haben gerade Jeenas Javascript Greasemonkey-kompatibel gemacht. Mit normalen Mitteln gibts auch überhaupt keine Probleme. So funktioniert etwa das folgende wunderprächtig: button.onclick = function() { alert('bla'); return false; };. Greasemonkey spielt da aber verrückt und will sonderbare Extrawürste. Siehe meine direkte Antwort auf Jeenas Frage für die Lösung des Problems, oder Jeenas neuster Post bzgl. des Endprodukts.

          weiterhin schönen abend...

          --
          Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
          sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
          1. wir haben gerade Jeenas Javascript Greasemonkey-kompatibel gemacht.

            Danke, wäre als Information sinnvoll gewesen, so war es für aussentstehende ein Nullproblem, da keiner wußte worum es ging.

            Interessant wäre wenigstens gewesen, zu erfahren, was mit "verrückt spielen" oder "sinnlosfehler" gemeint ist. Da wenn dieses Problem ein Browserspezifisches ist, die Fragen danach früher oder später kommen.

            Struppi.

            --
            Javascript ist toll (Perl auch!)
            1. n'abend,

              Danke, wäre als Information sinnvoll gewesen, so war es für aussentstehende ein Nullproblem, da keiner wußte worum es ging.

              den schwarzen Peter schieb ich mal ganz unverfrohen dem Schweden zu :)

              Interessant wäre wenigstens gewesen, zu erfahren, was mit "verrückt spielen" oder "sinnlosfehler" gemeint ist. Da wenn dieses Problem ein Browserspezifisches ist, die Fragen danach früher oder später kommen.

              das erste Problem war, dass die handelsübliche Notation um einem Objekt einen onclick-Handler zuzuweisen nicht funktionieren wollte.
              object.onclick = function(){ alert('foo') };
              warf einen Fehler. Sinnlos war dieser deshalb, weil abgesehen von einer Zeilennummer (von Firebug) nicht wirklich brauchbare Informationen geliefert wurden.

              Experimente (meinerseits) ergaben, dass object.setAttribute('onclick', "someFunction(); return false;") zwar funktionierten, aber in keinster Weise auf das bbcode-Objekt zugegriffen werden konnte. Weder das Speichern einer Referenz auf bbcode i einem neuen Attribut von object, noch bbcode global verfügbar machen brachten den gewünschten Erfolg.

              DOM-Level3 will Events dann gleich richtig™ registriert haben. object.addEventListener('click', function(){ alert('bla'); return false; }, true); hatte immerhin den Effekt, dass der Handler ausgeführt wurde, allerdings ohne den erhofften Abbruch durch return false;. addEventListener können wohl das EventListener-Interface implementierende Objekte, oder normale JS-Funktionen übergeben werden. Im Interface ist von keinem Rückgabewert die Rede.

              Es ging nur noch darum, das (ungewollte) Absenden des Formulars zu unterbinden. Jedem EventHandler wird ein Event-Objekt übergeben. Dieses enthält neben detailierteren Informationen zum Event auch noch ein paar Methoden. So kann man mittels Event.stopPropagation() das "hoch-bubblen" des Events unterbinden. Die Methode Event.preventDefault() kann man die Fortführung des Events abbrechen - also das return false; ersetzen.

              Bei diesem Problemen handelte es sich wohl aber um GreaseMonkey-eigene Dinge. Firefox an sich kann ja sehr gut mit object.onclick = function(){ alert('foo'); return false; }; umgehen.

              weiterhin schönen abend...

              --
              Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
              sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
              1. Es ging nur noch darum, das (ungewollte) Absenden des Formulars zu unterbinden.

                Was zumindest auch anders gelöst werden konnte.

                Bei diesem Problemen handelte es sich wohl aber um GreaseMonkey-eigene Dinge. Firefox an sich kann ja sehr gut mit object.onclick = function(){ alert('foo'); return false; }; umgehen.

                Deshalb war ich auch so erstaunt. Aber danke, für die Ausführungen. Mal sehen was da noch kommt.

                Struppi.

                --
                Javascript ist toll (Perl auch!)
                1. n'abend,

                  Was zumindest auch anders gelöst werden konnte.

                  das wohl schon. Aber hätte ich dann diese Event-Exkursion gemacht und gelernt, was ich gelernt habe? ;)

                  weiterhin schönen abend...

                  --
                  Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
                  sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
                  1. Was zumindest auch anders gelöst werden konnte.

                    das wohl schon. Aber hätte ich dann diese Event-Exkursion gemacht und gelernt, was ich gelernt habe? ;)

                    Falls du dazu noch was lesen wilst, Quirksmode hat nocht mehr Stoff ;-)
                    http://www.quirksmode.org/js/introevents.html
                    http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html

                    Struppi.

                    --
                    Javascript ist toll (Perl auch!)
                    1. n'abend,

                      Falls du dazu noch was lesen wilst, Quirksmode hat nocht mehr Stoff ;-)
                      http://www.quirksmode.org/js/introevents.html
                      http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html

                      heute wohl nicht mehr, aber morgen wird sich wohl die eine oder andere langweilige Vorlesung finden lassen ;)
                      danke.

                      weiterhin schönen abend...

                      --
                      Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
                      sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
  2. n'abend,

    var button = document.createElement("button");

    button.addEventListener("click", function() { alert("test"); return false; }, true);

      
    ich konnte unser kleines Problem mittlerweile lösen. dem EventHandler wird immer das Event-Objekt übergeben. Dieses Objekt besitzt laut [DOM Events](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event) die Methode preventDefault() besitzt.  
      
    `button.addEventListener("click", function(e) { self.insert(aTag, eTag); e.stopPropagation(); e.preventDefault(); }, true);`{:.language-javascript}  
      
    (das zusätzliche Unterbinden des Event-Bubblings ist wohl nicht notwendig)  
      
    weiterhin schönen abend...
    
    -- 
    Freundlich wie man war, hat man mir Großbuchstaben geschenkt.  
      
    sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
    
  3. Hell-O!

    Ich habe einen Button, wobei Buttons normalerweise einen submit auslösen wenn sie geklickt werden [...] Das möchte ich verhindern und habe deshalb dieses return false; eingebaut, leider wird das nicht beachtet

    Machst du es auf die herkömmliche Weise, funktioniert es:

    button.onclick = function() { alert('test'); return false; };

    Hat jemand dafür einen Lösungsansatz (außer global und außer anstatt Button einen Link oder so nehmen)?

    Ich weiß nicht, welches Verhalten das richtige ist, aber tendenziell würde ich in diesem Fall die Finger von addEventListener lassen.

    Siechfred

    --
    Ich bin strenggenommen auch nur interessierter Laie. (molily)
    Siechfreds Tagebuch || Falle Aufteilungsbescheid || RT 221 Erfurt-Altstadt i.V.
    1. Hallo,

      Machst du es auf die herkömmliche Weise, funktioniert es:
      button.onclick = function() { alert('test'); return false; };

      Das geht in diesem Fall nicht, da hat komischerweise Greasmonkey etwas dagegen und bricht mit einem Sinnlosfehler ab.

      Grüße
      Jeena Paradies

      --
      Pavatar Zwischenstand Gravatar ist ja wieder kaputt | Jlog | Gourmetica Mentiri
  4. Hallo,

    Einige von euch kennen und nutzen vielleicht auch schon die Funktionalität meiner BBCode-Eingabevereinfachung als user.js, leider wird die user.js in der Vorschau und bei einem neuen Thread nicht ausgeführt und da fehlen dann die Buttons:

    http://jeenaparadies.net/t/s/BBCodeButtons.png

    Dafür gibt es jetzt Abhilfe mit einem Greasmonkey-Sktipt: CForum-BBCodeButtons

    Grüße
    Jeena Paradies

    --
    Pavatar Zwischenstand Gravatar ist ja wieder kaputt | Jlog | Gourmetica Mentiri
    1. Hallo Jeena,

      Dafür gibt es jetzt Abhilfe mit einem Greasmonkey-Sktipt: CForum-BBCodeButtons

      Lob! Lob! Lob!

      (Auch wenn ich es nicht mehr brauche, sobald ich CForum.tmbundle vervollständigt habe. ;)

      Tim

      1. Lieber Tim,

        (Auch wenn ich es nicht mehr brauche, sobald ich CForum.tmbundle vervollständigt habe. ;)

        heißt das, dass diese Funktionalität demnächst im CForum (und bitte auch hier!) zum üblichen Funktionsumfang zählen wird?

        Liebe Grüße aus Ellwangen,

        Felix Riesterer.

        1. Hallo Felix,

          heißt das, dass diese Funktionalität demnächst im CForum (und bitte auch hier!) zum üblichen Funktionsumfang zählen wird?

          Keine Ahnung, da solltest Du jemanden anderes fragen.

          CForum.tmbundle ist für mich der Spitzname für eine Erweiterung meines Leib- und Mageneditors, so dass ich nach Betätigen der Tastenkombination Command-Control-E Antworten auf Postings bequem in diesem und nicht in einer fummeligen Textarea editieren kann. Das hätte dann kleine Vorteile wie Syntax-Highlighting (für das Posting und für Quellcode), all die Vorteile eines richtigen Texteditors und vor allem von mir selbst konfigurierbare Shortcuts, z.B. die Eingabe von "link<Tab>" für das CForum-Markup für Links, etc. Sieht dann ungefähr so aus, wie auf diesem Screenshot. Die Tastenkombination Command-S speichert das Geschriebene dann wieder zurück in die Textarea, in der ich nur noch auf Vorschau klicken muss.

          Das ganze ist für Nicht-Mac-Besitzer und Nicht-Textmate-Benutzer natürlich irrelevant. Nur ist Jeena selbst Textmate-Benutzer; hat er mich doch letzte Woche erst auf die Idee gebracht, in einem Sonntagabendsprojekt so etwas zu basteln. Wobei ich da noch etwas Arbeit investieren muss, die simple Grammatik für das Syntax-Highlighting hat noch zwei, drei kleine Macken. Allerdings habe ich derzeit noch keine Zeit dafür.

          Tim

  5. Lieber Jeena,

    Ich habe einen Button, wobei Buttons normalerweise einen submit auslösen wenn sie geklickt werden:

    das ist meines Wissens so nicht unbedingt richtig. Ein <http://de.selfhtml.org/html/referenz/attribute.htm#button@title=<button> kennt das type-Attribut>. Wenn er vom Typ "button" ist, dann submittet er garnix! Anscheinend wurde mit document.createElement("button") automatisch der Typ "submit" als default-Wert eingestellt, oder so ähnlich...

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    1. Hallo,

      Anscheinend wurde mit document.createElement("button") automatisch der Typ "submit" als default-Wert eingestellt, oder so ähnlich...

      Jo das ist ja auch der Defaultwert.

      Grüße
      Jeena Paradies

      --
      Pavatar Zwischenstand Gravatar ist ja wieder kaputt | Jlog | Gourmetica Mentiri
      1. Lieber Jeena,

        Anscheinend wurde mit document.createElement("button") automatisch der Typ "submit" als default-Wert eingestellt, oder so ähnlich...
        Jo das ist ja auch der Defaultwert.

        und was passiert, wenn Du Deinem Script noch ein
            button.type = "button";
        hinzufügst?

        Jetzt lass' Dir doch net alles aus der Nase ziehen!

        Liebe Grüße aus Ellwangen,

        Felix Riesterer.

      2. Hallo,

        Anscheinend wurde mit document.createElement("button") automatisch der Typ "submit" als default-Wert eingestellt, oder so ähnlich...
        Jo das ist ja auch der Defaultwert.

        Jetzt habe ich erst verstanden was du meinst und habe type="button" reingemacht ;-) so hat sich das auch ohne die Methode preventDefault(); gelöst. Danke

        Grüße
        Jeena Paradies

        --
        Pavatar Zwischenstand Gravatar ist ja wieder kaputt | Jlog | Gourmetica Mentiri
        1. Lieber Jeena,

          Jetzt habe ich erst verstanden was du meinst

          *ggg*

          so hat sich das auch ohne die Methode preventDefault(); gelöst. Danke

          Das lese ich gerne. Prima!

          Liebe Grüße aus Ellwangen,

          Felix Riesterer.

        2. Jetzt habe ich erst verstanden was du meinst und habe type="button" reingemacht ;-) so hat sich das auch ohne die Methode preventDefault(); gelöst. Danke

          Warum fügst duz stattdessen nicht gleich ein input Element ein?
          So wie ich das sehe gibt's keine Notwendigkeit für eine Buttonelement.

          Und, wie lautete eigentlich die "sinnlosfehler"-meldung im greasemonkey?

          Struppi.

          --
          Javascript ist toll (Perl auch!)
          1. Hallo,

            Warum fügst duz stattdessen nicht gleich ein input Element ein?
            So wie ich das sehe gibt's keine Notwendigkeit für eine Buttonelement.

            Keine Ahnung, ich lies mich damals als ich das Script schrieb wohl von SELFHTMLs Meinung das wäre der "moderne" weg blenden ;-).

            Und, wie lautete eigentlich die "sinnlosfehler"-meldung im greasemonkey?

            Error: Component is not available
            Source File:
            Line: 214
            Source Code:
            214

            Grüße
            Jeena Paradies

            --
            Pavatar Zwischenstand Gravatar ist ja wieder kaputt | Jlog | Gourmetica Mentiri