zusätzliches click-event registrieren

[chapolote]

Auf einer Wordpress-Seite wird ein DOM-Element durch ein Plugin generiert, daß bei click ein Overlay öffnet.

Ich möchte diesem Element ein weiteres click-Event verpassen, d.h. bei Click soll das Overlay weiterhin öffnen und zusätzlich meine eigene Funktion auslösen. Dabei möchte ich den Code des Plugins, welches den Button und das erste Click-Event generiert, unangetastet lassen.

Ich habe folgenden Code probiert, aber irgendwie wird mein Event nicht ausgeführt, es wird lediglich das Overlay geöffnet. Meine eigene Funktion ist sauber programmiert, binde ich sie an ein anderes DOM-Element wird sie anstandslos ausgeführt.

jQuery(window).load(function(){
   jQuery('.element').click(function() {
     ...tue etwas
   }
});

Sollte das prinzipiell funktionieren oder muss ich hier ganz anders vorgehen, wenn schon ein click-event registriert ist?

Gruß, chapolote

 

[mikdoe]

Hast du es auch mit .addEventListener() versucht?
Ich bin nicht sicher, ob .click() hinzufügt oder überschreibt obwohl es laut https://stackoverflow.com/a/5183628 ergänzen sollte.
Woran machst du fest, dass der Event nicht ausgeführt wird?

 

[chapolote]

Weil er nicht ausgeführt wird. Habe es mit addEventListener probiert, warf mir aber einen Fehler in der Console aus, addEventListener sei nicht definiert. Komisch. Bin den ganzen Tag unterwegs, werde heute Abend nochmal schauen....

 

[tsseh]

Sollte das prinzipiell funktionieren oder muss ich hier ganz anders vorgehen, wenn schon ein click-event registriert ist?

dazu müsste man wissen, was der eventhandler macht.
da es bei dir nicht geht, wird er wohl stopImmediatePropagation() aufrufen,
dann kannst du dich nur noch davorhängen, etweder gleich in der event capturing phase, oder in der bubbling phase auf ein element welches vorher kommt (wenn es so eins gibt)

edit:
ist das eigentlich wieder mal so saudoof spezifiziert oder nur so umgesetzt? da es alle browser so machen, vermute ich "saudoof spezifiziert".

die eventhandler in der capturing phase werden nach denen in der bubbling phase aufgerufen, wenn sie später hinzugefügt wurden, es wird also rein nach der aufrufreihenfolge von addEventListener gegangen, unabhängig von der phase!!!
was soll der mist denn?

du musst also den eventhandler in der capturing phase auf ein element hängen welches im dom vor deinem eigentlichen element kommt - oder gleich document - (und dann wie bei event delegation dein target prüfen)

 

[mikdoe]

@hesst: es gibt nur eins auf das man sich verlassen kann....

 

[chapolote]

Ich hab das schon probiert, mein Event einem Elternelement zu verpassen. Ebenfalls erfolglos. Mal sehen, ob ich heute Abend weiter komme....

- - - Aktualisiert - - -

Also, hab es mir nochmal angeschaut:

jQuery('.elem').addEventListener('click',function(){...}); gibt einen Fehler, da jQuery und addEventListener zusammen nicht funktionieren.

jQuery('elem').on('click',function(){...}); funktioniert zwar bei anderen Elementen im DOM, aber nicht bei meinem Element. Der Code wird nicht ausgeführt, es öffnet sich lediglich das Popup. Selbst wenn ich das oberste Elternelement anspreche, das für die Funktion noch Sinn macht, ändert das nichts.

Probiert habe ich auch noch document.getElementsByClassName('elem').addEventListener('click',function(){...}); Auch hier gibt die Console einen Fehler aus, addEventListener is not a function. Das verstehe ich wiederum gar nicht, sollte doch eigentlich die richtige Syntax sein.

Ich bin jetzt mit meinem (relativ dürftigen) Javascript-Latein am Ende. Wenn jemand dazu bereit wäre, sich das Ganze mal live anzuschauen, könnte ich ihm den Link zur Seite bereitstellen.

Gruß, chapolote

 

[tsseh]

jQuery('.elem').addEventListener('click',function(){...}); gibt einen Fehler, da jQuery und addEventListener zusammen nicht funktionieren.

doch, aber jQuery('.elem') gibt ein jquery objekt zurück. jQuery('.elem')[0] das 1. element welches der selector matcht

jQuery('elem').on('click',function(){...}); funktioniert zwar bei anderen Elementen im DOM, aber nicht bei meinem Element. Der Code wird nicht ausgeführt, es öffnet sich lediglich das Popup. Selbst wenn ich das oberste Elternelement anspreche, das für die Funktion noch Sinn macht, ändert das nichts.

weil du das event in die capturing phase einhängen musst, da geht nicht mit jquery

Probiert habe ich auch noch document.getElementsByClassName('elem').addEventListener('click',function(){...}); Auch hier gibt die Console einen Fehler aus, addEventListener is not a function. Das verstehe ich wiederum gar nicht, sollte doch eigentlich die richtige Syntax sein.

weil getElementsByClassName eine collection liefert, das 1. element bekommt man wieder mit document.getElementsByClassName('elem')[0]

 

[chapolote]

@tsseh
1000 Dank für die kleine Lektion. Ich weiß das sehr zu schätzen, das findet man in einschlägigen Foren so nicht unbedingt. Nicht nur zu sagen, daß etwas so nicht geht sondern auch warum. 1. Klasse!!!

Bin schon wieder unterwegs, werde dann mal versuchen herauszufinden, was genau es mit diesem „Einhängen in die Capturing-Phase“ auf sich hat. Mal sehen, was mir Google dazu so liefert....

Schönen Tag wünsche ich Dir

- - - Aktualisiert - - -

Doch noch kurz Zeit gefunden, und jaaaaaa, es läuft!!!! Danke nochmals für die Hinweise an alle und sehr speziell an tsseh!

document.getElementsByClassName('elem')[0].addEventListener('click',function(){...},true)

ist die magische Zeile!

Sehr schön, wieder was gelernt )))

Grüße an alle!

 

[tsseh]

document.getElementsByClassName('elem')[0].addEventListener('click',function(){...},true)

1) das funktioniert aber nur für das 1. element mit klasse elem, keine ahnung ob es mehrere gibt.
2) ich vermute mal, dass das element mit klasse elem auch das mit dem anderen click-event ist. wenn ja, dann funktioniert das auch nur, wenn an jeder stelle, auf die geklickt wird ein child element liegt

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      document.addEventListener("DOMContentLoaded", function()
      {
        var x1 = document.getElementById("x1");
        x1.addEventListener("click", function (e)
        {
          console.log("click auf x1");
          e.stopImmediatePropagation();
        });
        x1.addEventListener("click", function (e)
        {
          console.log("click auf x1 in der bubbling phase nach stopPropagation wird nichtmehr ausgeführt");
        });
        document.body.addEventListener("click", function (e)
        {
          if (e.target == x1)
          {
            console.log("click auf x1 in der capturing phase am body wird ausgeführt");
          }
        }, true);
        x1.addEventListener("click", function ()
        {
          console.log("click auf x1 in der capturing phase wird ausgeführt");
        }, true);
        var x0 = document.getElementById("x1").firstChild;
        x0.addEventListener("click", function (e)
        {
          console.log("click auf x0 in der bubbling phase wird ausgeführt");
        });
      });
    </script>
  </head>
  <body>
      <div id="x1"><div id="x0">hier geht es</div> hier nur über ein parent objekt</div>
  </body>
</html>

 

[kkapsner]

Hm... bubbling und capturing sind ja eigentlich auf der Target-Node gar nicht definiert. Du befindest dich ja weder in dem einen noch in dem anderen. Du hast ja eigentlich drei Phasen: capturing, dann die Events auf der Node selbst und dann bubbling.

Aber ich verstehe deinen Punkt. Ich verstehe aber auch, warum das so umgesetzt wurde.