Eventhandler auf inneinander verschachtelte Elemente? – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 11:25:21 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786375?srt=yes#m1786375 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786375?srt=yes#m1786375 <p>Hallo,</p> <p>ich habe ein Div, auf dem ein Eventhandler registriert ist. Innerhalb des Divs möchte ich eine Checkbox setzen, auf das ich einen anderen Eventhandler registrieren möchte, ohne dass der Eventhandler des Divs reagiert, wenn der Checkbox-Eventhandler reagiert.</p> <p>Geht das? Und wie macht man das dann?</p> <p>Jörg</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 11:49:12 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786377?srt=yes#m1786377 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786377?srt=yes#m1786377 <blockquote> <p>Hallo,</p> <p>ich habe ein Div, auf dem ein Eventhandler registriert ist. Innerhalb des Divs möchte ich eine Checkbox setzen, auf das ich einen anderen Eventhandler registrieren möchte, ohne dass der Eventhandler des Divs reagiert, wenn der Checkbox-Eventhandler reagiert.</p> <p>Geht das? Und wie macht man das dann?</p> <p>Jörg</p> </blockquote> <p>Hier noch <a href="https://jsfiddle.net/u1dzrsvn/" rel="noopener noreferrer">ein Link</a>, der zeigt, was ich (nicht) möchte.</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 11:59:09 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786378?srt=yes#m1786378 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786378?srt=yes#m1786378 <p>Tach!</p> <blockquote> <p>ich habe ein Div, auf dem ein Eventhandler registriert ist. Innerhalb des Divs möchte ich eine Checkbox setzen, auf das ich einen anderen Eventhandler registrieren möchte, ohne dass der Eventhandler des Divs reagiert, wenn der Checkbox-Eventhandler reagiert.</p> </blockquote> <p>Wenn du dich über das Konzept "Event Bubbling and Capturing" informierst, wirst du das wissen, denn wie man das Bubbling stoppt, denn das steht in den Tutorials mit drin.</p> <p>dedlfix.</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 12:23:40 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786381?srt=yes#m1786381 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786381?srt=yes#m1786381 <p>@@Jörg</p> <blockquote> <p>ich habe ein Div, auf dem ein Eventhandler registriert ist.</p> </blockquote> <p>Hier steckt schon ein Fehler. <code>div</code>s kann man nicht clicken. Einige Nutzer (die sowas wie eine Maus verwenden) können es, viele andere nicht (z.B. Tastaturnutzer).</p> <p>Für clickbare Elemente ist <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>…</span><span class="token punctuation">></span></span></code> (wenn es ein Link ist, der woandershin führt) bzw. <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span></code> (für Aktionen auf einer Seite) zu verwenden.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Da du in deinem Eröffnungsposting nur allgemein von Eventhandlern geschrieben hattest und es erst aus deinem nachgereichten Beispiel ersichtlich wurde, dass es sich dabei um <code>click</code>-Eventhandler handelt, sei <a href="/users/27" class="mention registered-user" rel="noopener noreferrer">@dedlfix</a> verziehen, dass er das nicht erwähnte. Obwohl man sich das hätte denken können.</p> <p>Bevor du fragst: Nein, interaktive HTML-Elemente kann man nicht verschachteln. Man kann aber mit CSS odr JavaScript interaktive Elemente so implementieren, dass sie sich wie verschachtelte anfühlen. Die UX-Frage ist, ob man das tun sollte.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>wenn es sich nicht um andere interaktive Elemente wie <code class="language-html"><img usemap=…</code> handelt. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Eventhandler auf document-Ebene Sat, 27 Mar 21 13:14:48 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786393?srt=yes#m1786393 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786393?srt=yes#m1786393 <p>Moin,</p> <p>ich möchte mich mit einem vergleichbaren Problem anschließen.</p> <p>Den Ablauf von Audio- und Video-Dateien möchte ich mit der Leertaste anhalten und wieder freigeben. Unabhängig davon, welches Element der Seite den Focus hat:</p> <pre><code class="block language-js"><span class="token comment">// Leertaste = toggle</span> <span class="token keyword">var</span> paused <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">startStop</span><span class="token punctuation">(</span> <span class="token parameter">evt</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> evt<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">32</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> evt<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> paused <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr_ausgewaehlte_videos<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> arr_ausgewaehlte_videos<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr_ausgewaehlte_audios<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> arr_ausgewaehlte_audios<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> paused <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr_ausgewaehlte_videos<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> arr_ausgewaehlte_videos<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr_ausgewaehlte_audios<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> arr_ausgewaehlte_audios<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> paused <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Leertaste bedeutet start/stop</span> <span class="token comment">//document.removeEventListener("keydown", tutNichts );</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"keydown"</span><span class="token punctuation">,</span> startStop <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Wenn ich die Leertaste (32) erkenne, setze ich SOFORT stopPropagation. Nachdem die Audio-Dateien per Javascript mit [alle play] gestartet wurden (wo liegt dann der Focus?) werden sie bei Leertaste kurz angehalten, laufen aber sofort wieder weiter. Warum ist stopPropagation hier wirkungslos?</p> <p>Wenn der Textteil im Focus liegt (irgendwo in den Textteil geklickt), stoppt die Musik bei Leertaste tatsächlich, aber gleichzeitig springt die Seite ein Bild nach oben wie auf anderen Webseiten auch. Wieso?</p> <p>Linuchs</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 12:00:58 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786379?srt=yes#m1786379 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786379?srt=yes#m1786379 <p>Hallo,</p> <blockquote> <p>Wenn du dich über das Konzept "Event Bubbling and Capturing" informierst, wirst du das wissen, denn wie man das Bubbling stoppt, denn das steht in den Tutorials mit drin.</p> </blockquote> <p>Werde ich machen. Davon ab, ist etwas gegen <a href="https://jsfiddle.net/u1dzrsvn/1/" rel="noopener noreferrer">diese Lösung</a> einzuwenden?</p> <p>Jörg</p> <p>Edit: Scheint genau das zu sein, was Du ansprachst </p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 12:12:29 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786380?srt=yes#m1786380 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786380?srt=yes#m1786380 <p>Tach!</p> <blockquote> <p>Davon ab, ist etwas gegen <a href="https://jsfiddle.net/u1dzrsvn/1/" rel="noopener noreferrer">diese Lösung</a> einzuwenden?</p> </blockquote> <blockquote> <p>Edit: Scheint genau das zu sein, was Du ansprachst </p> </blockquote> <p>Nein, eigentlich nicht. Man kann zwar innerhalb des äußeren Eventhandlers das Target prüfen, aber du kannst auch komplett verhindern, dass der außere Eventhandler überhaupt aufgerufen wird, wenn du das Bubbling im inneren Eventhandler stoppst.</p> <p>dedlfix.</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 13:54:31 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786403?srt=yes#m1786403 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786403?srt=yes#m1786403 <p>Hi dedlfix,</p> <blockquote> <p>Nein, eigentlich nicht. Man kann zwar innerhalb des äußeren Eventhandlers das Target prüfen, aber du kannst auch komplett verhindern, dass der außere Eventhandler überhaupt aufgerufen wird, wenn du das Bubbling im inneren Eventhandler stoppst.</p> </blockquote> <p>Aber irgendwie gelingt mir das Ganze nur bei Click-.Events.</p> <p>Wenn ich dasselbe bei einem <a href="https://jsfiddle.net/u1dzrsvn/2/" rel="noopener noreferrer">Change-Event</a> versuche, scheitert es.</p> <p>Warum?</p> <p>Jörg</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 12:47:33 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786385?srt=yes#m1786385 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786385?srt=yes#m1786385 <p>Tach!</p> <blockquote> <blockquote> <p>ich habe ein Div, auf dem ein Eventhandler registriert ist.</p> </blockquote> <p>Hier steckt schon ein Fehler. <code>div</code>s kann man nicht clicken.</p> </blockquote> <p>Und warum soll man darauf keinen Click-Handler registrieren dürfen? Im Zusammenhang mit Event Bubbling ist das doch legitim, nur einen Handler auf einem Container statt jeweils einzelne auf dessem Inhalt zu verwenden.</p> <p>dedlfix.</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 12:58:28 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786388?srt=yes#m1786388 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786388?srt=yes#m1786388 <p>Hallo Gunnar,</p> <blockquote> <p>wenn es sich nicht um andere interaktive Elemente wie <img usemap=… handelt.</p> </blockquote> <p>was nicht responsiv und darum ebenfalls blöd ist.</p> <p>Ein SVG mit klickbaren Flächen ist auch nicht immer eine Option, gerade, wenn ein Punkt in einer Bitmap auszuwählen ist.</p> <p>Welche Lösung bleibt dann?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 13:10:31 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786390?srt=yes#m1786390 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786390?srt=yes#m1786390 <p>Hallo Gunnar,</p> <blockquote> <p>Hier steckt schon ein Fehler. <code>div</code>s kann man nicht clicken. Einige Nutzer (die sowas wie eine Maus verwenden) können es, viele andere nicht (z.B. Tastaturnutzer).</p> </blockquote> <p>Die Tastaturnutzer will ich ausschließen. Deshalb mach ich das so. </p> <p>Jörg</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 14:06:26 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786407?srt=yes#m1786407 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786407?srt=yes#m1786407 <p>@@dedlfix</p> <blockquote> <blockquote> <blockquote> <p>ich habe ein Div, auf dem ein Eventhandler registriert ist.</p> </blockquote> <p>Hier steckt schon ein Fehler. <code>div</code>s kann man nicht clicken.</p> </blockquote> <p>Und warum soll man darauf keinen Click-Handler registrieren dürfen? Im Zusammenhang mit Event Bubbling ist das doch legitim, nur einen Handler auf einem Container statt jeweils einzelne auf dessem Inhalt zu verwenden.</p> </blockquote> <p>Von Verarbeitung des vom Click auf die Checkbox ausgelösten Event am <code>div</code> war hier keine Rede.</p> <p>Klar kann man Eventhandler weiter oben registrieren und Event-Bubbling nutzen – wenn die Targets interaktive Elemente sind (oder Kindelemente davon).</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 13:14:48 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786392?srt=yes#m1786392 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786392?srt=yes#m1786392 <p>@@Jörg</p> <blockquote> <p>Die Tastaturnutzer will ich ausschließen. Deshalb mach ich das so. </p> </blockquote> <p>Damit schließt du mich als Antwortenden aus. Keine Lust, hier Trolle zu füttern.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 13:18:26 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786395?srt=yes#m1786395 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786395?srt=yes#m1786395 <p>Hallo Gunnar,</p> <p>da war ein , hast Du deinen Humor heute morgen im Bett gelassen?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Eventhandler auf document-Ebene Sat, 27 Mar 21 13:32:37 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786398?srt=yes#m1786398 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786398?srt=yes#m1786398 <p>Tach!</p> <blockquote> <p>Wenn ich die Leertaste (32) erkenne, setze ich SOFORT stopPropagation.</p> </blockquote> <p>Javascript wird singlethreaded ausgeführt. Es ist egal, ob du das am Anfang oder am Ende des Eventhandlers setzt. Während er läuft, passiert mit dem Event nichts weiter.</p> <blockquote> <p>Nachdem die Audio-Dateien per Javascript mit [alle play] gestartet wurden (wo liegt dann der Focus?) werden sie bei Leertaste kurz angehalten, laufen aber sofort wieder weiter. Warum ist stopPropagation hier wirkungslos?</p> </blockquote> <p>Ist es das? Wirf deinen Debugger an, setz ein paar Breakpoints oder console.log()-Ausgaben und schau nach, wann was aufgerufen wird.</p> <p>dedlfix.</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 13:53:01 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786402?srt=yes#m1786402 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786402?srt=yes#m1786402 <blockquote> <p>Hallo Gunnar,</p> <p>da war ein , hast Du deinen Humor heute morgen im Bett gelassen?</p> </blockquote> <p>Danke @Rolf War wirklich als netter, kleiner Scherz gedacht </p> <p>Jörg</p> Eventhandler auf document-Ebene Sat, 27 Mar 21 13:40:01 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786400?srt=yes#m1786400 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786400?srt=yes#m1786400 <p>Hallo dedlfix,</p> <p>ist schon alles richtig. Aber trotz stopPropagation braucht es noch ein preventDefault, gerade mal in den DevTools probiert. Warum, weiß ich auch nicht so recht - ohne Propagation bekommt der Brauser ja eigentlich nichts mehr vom Tastendruck mit.</p> <p>Update: Kollege Mozilla meint dazu:</p> <blockquote> <p>The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method.</p> </blockquote> <p>Die <a href="https://dom.spec.whatwg.org/#stop-propagation-flag" rel="nofollow noopener noreferrer">DOM-Spec</a> unterscheidet auch zwischen einem stop-propagation und einem canceled Flag. preventDefault setzt canceled. Und offenbar findet das Default-Verhalten eines Events unabhängig von der Propagation statt. Aber ob die Spec das hergibt, dafür müsste ich mir diesen Haufen "if this then that" durchlesen, aber offenbar findet das Default-Verhalten außerhalb des Bubblings statt.</p> <p>Update: Soweit ich das begreife, wird diese Hypothese <a href="https://dom.spec.whatwg.org/#dispatching-events" rel="nofollow noopener noreferrer">von der Spec bestätigt</a>. Schritt 5.13 und 5.14 beschreiben das Bubbling, und das Default-Verhalten ("activation behavior") folgt in Schritt 11 separat.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Eventhandler auf document-Ebene Sat, 27 Mar 21 13:59:47 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786404?srt=yes#m1786404 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786404?srt=yes#m1786404 <blockquote> <p>Javascript wird singlethreaded ausgeführt.</p> </blockquote> <p>Das bedeutet was? stopPropagation wird bis zum Ende der function ignoriert? Also muss ich das Durchhecheln und den Start/Stop der Audios in eine neue function alleToggle legen? Sowas wie</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">startStop</span><span class="token punctuation">(</span> <span class="token parameter">evt</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> evt<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">32</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> evt<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alleToggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <blockquote> <p>und schau nach, wann was aufgerufen wird.</p> </blockquote> <p>Komisch, wenn ich mit alert nach stopPropagation eine Verzögerung einbaue, klappt es mit dem Stop/Start, wenn zuvor mit JavaScript gestartet. Fall B, das Blättern um ein Bild nach oben bleibt aber.</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">startStop</span><span class="token punctuation">(</span> <span class="token parameter">evt</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> evt<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">32</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// alert( "vor stopPropagation" );</span> evt<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span> <span class="token string">"nach stopPropagation"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 14:50:11 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786423?srt=yes#m1786423 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786423?srt=yes#m1786423 <p>Hallo Jörg,</p> <blockquote> <blockquote> <p>da war ein , hast Du deinen Humor heute morgen im Bett gelassen?</p> </blockquote> <p>War wirklich als netter, kleiner Scherz gedacht </p> </blockquote> <p>wenn es um Accessibility geht, verstehen hier manche Nutzer aber gar keinen Spaß.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren. </div> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 14:03:32 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786405?srt=yes#m1786405 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786405?srt=yes#m1786405 <p>Hallo Jörg,</p> <p>du Spaßvogel, du kannst doch nicht erwarten, ein click-Event durch stopPropagation in einem change-Eventhandler zu stoppen. Das sind separate Events und sie werden separat geroutet. Vor allem wird das change-Event erst verarbeitet, wenn das click-Event schon längst Geschichte ist.</p> <p>Es ist nicht so, dass die Checkbox das change-Event eigenständig kontrolliert. Du klickst auf die Checkbox. Das click-Event wird nun vom Browser in die Event-Warteschlange gestellt und durchläuft den Event-Dispatch. D.h. es hat die capturing-Phase (vom dokument hinunter zur Checkbox) und die bubbling-Phase (von der Checkbox hoch zum dokument) und auf jeder Stufe können Eventhandler lauern. Solange keiner von denen preventDefault aufruft, findest <strong>danach</strong> das Defaultverhalten statt (danke, Linuchs, das war mir bis eben nicht richtig klar), und das besteht darin, den checked-Zustand der Checkbox zu ändern und ein change-Event in die Warteschlange zu stellen.</p> <p>Deswegen bekommst Du auch erst die click-Meldung vom div und danach die change-Meldung.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Eventhandler auf document-Ebene Sat, 27 Mar 21 14:06:33 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786408?srt=yes#m1786408 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786408?srt=yes#m1786408 <p>Hallo Linuchs,</p> <p>überwache Ereignisse nicht mit alert, logge lieber in die Konsole. Gerade bei Tastatur oder Maus schießt der Umstand quer, dass da auf einmal ein Dialog aufgeht. Was Du mit der alert-Positionierung beobachtest, leidet also sozusagen unter Quanteneffekten - der Umstand, dass beobachtet wird, ändert das Experiment.</p> <p>Den Grund, warum es nicht klappt, <a href="https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786400#m1786400" rel="noopener noreferrer">habe ich ja schon erklärt</a>.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Eventhandler auf document-Ebene Sat, 27 Mar 21 14:19:13 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786410?srt=yes#m1786410 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786410?srt=yes#m1786410 <p>Tach!</p> <blockquote> <p>Das bedeutet was? stopPropagation wird bis zum Ende der function ignoriert?</p> </blockquote> <p>Das Event ist kein magisches Ding, das irgendwas undurchschaubares macht. Es ist ein Objekt wie alle anderen auch. stopPropagation() an diesem Objekt aufgerufen wird vermutlich nicht viel mehr tun, als ein Flag zu setzen, also eine Eigenschaft des Objekts. Wenn dein Eventhandler fertig ist, übernimmt die Eventsteuerung wieder und wird die Eigenschaften des Objekts daraufhin untersuchen, ob noch weitere Handler aufzurufen sind oder nicht oder was auch immer zu tun ist.</p> <p>Und wie Rolf B anmerkte, hilft stopPropagation() nur das Weitergeben an andere Elemente zu verhindern, aber stoppt keine Default-Handler am gleichen Element. Da muss noch preventDefault() dazukommen.</p> <p>dedlfix.</p> Eventhandler auf inneinander verschachtelte Elemente? Sat, 27 Mar 21 14:30:32 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786413?srt=yes#m1786413 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786413?srt=yes#m1786413 <p>Hi Rolf,</p> <p>na ok, schade.</p> <p>Hab nun der Checkbox eine Klasse mitgegeben und laure auf den Click hierauf. Dann gehts.</p> <p>Jörg</p> Eventhandler auf document-Ebene Sat, 27 Mar 21 14:35:29 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786417?srt=yes#m1786417 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786417?srt=yes#m1786417 <p>Hallo Rolf,</p> <blockquote> <p>Den Grund, warum es nicht klappt, habe ich ja schon erklärt.</p> </blockquote> <p>Hmm, da steige ich nicht ganz durch. Habe verstanden: Events, die auch ohne Javascript passieren (etwa der Aufruf einer neuen Seite bei <code><a href</code> müssen NICHT mit stopPropagation, sondern mit preventDefault unterbunden werden.</p> <p>Das funktioniert tatsächlich bei Leertaste, wenn zuvor in den Textbereich geklickt wurde, das Blättern um ein Bild nach oben unterbleibt:</p> <pre><code class="block language-js"> <span class="token keyword">function</span> <span class="token function">startStop</span><span class="token punctuation">(</span> <span class="token parameter">evt</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> evt<span class="token punctuation">.</span>keyCode <span class="token operator">==</span> <span class="token number">32</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// evt.stopPropagation();</span> evt<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <p>Doch wenn die Audios per Javascript [alle play] gestartet wurden, stoppen sie kurz und laufen wie zuvor unverändert weiter.</p> <p>Die Logik wäre ja, die per Javascript eingerichteten Events mit stopPropagation zu behandeln, also die kommentierte Zeile freizugeben. Funktioniert nicht. Audios stoppen kurz und laufen sofort wieder an.</p> <p>Linuchs</p> Eventhandler auf document-Ebene Sat, 27 Mar 21 14:48:36 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786422?srt=yes#m1786422 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786422?srt=yes#m1786422 <p>Hallo Linuchs,</p> <blockquote> <blockquote> <p>Den Grund, warum es nicht klappt, habe ich ja schon erklärt.</p> </blockquote> <p>Hmm, da steige ich nicht ganz durch. Habe verstanden: Events, die auch ohne Javascript passieren (etwa der Aufruf einer neuen Seite bei <code><a href</code> müssen NICHT mit stopPropagation, sondern mit preventDefault unterbunden werden.</p> </blockquote> <p>was für ein Event es ist, spielt keine Rolle (wenn <em>ich</em> das richtig verstanden habe). Sondern wo es wirken darf: preventDefault() unterbindet die Standardaktion des Elements, dem das Event eigentlich gilt, und stopPropagation() verhindert, dass das Event noch von anderen Elementen (DOM-Vorfahren) behandelt werden kann.</p> <blockquote> <p>Das funktioniert tatsächlich bei Leertaste, wenn zuvor in den Textbereich geklickt wurde, das Blättern um ein Bild nach oben unterbleibt:</p> </blockquote> <p>Ich bin ja echt irritiert. Mir ist noch nie aufgefallen, dass das Drücken der Leertaste im Browser irgendeine Aktion auslöst (außer wenn ein Link oder ein Formularelement focussiert ist). Was genau die Wirkung der Leertaste ist, verstehe ich auch noch nicht; wenn ich es hier auf der Beitragsseite versuche, springt die Anzeige jedenfalls nach <strong>unten</strong>, zum Threadbaum.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren. </div> Eventhandler auf document-Ebene Sat, 27 Mar 21 14:55:14 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786428?srt=yes#m1786428 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786428?srt=yes#m1786428 <p>Hallo Martin,</p> <blockquote> <p>Mir ist noch nie aufgefallen, dass das Drücken der Leertaste im Browser irgendeine Aktion auslöst (außer wenn ein Link oder ein Formularelement focussiert ist).</p> </blockquote> <p>Bin soeben auch drauf gekommen: Wenn ich auf den Button [alle play] klicke, laufen die Audio-Dateien an und der <strong>Button bleibt fokussiert</strong>. Die Leertaste wirkt also auch auf diesen Button und startet wieder.</p> <p>Entsprechend wenn [alle Pause] fokussiert ist. Audios laufen bei Leertaste los und stoppen sofort wieder. Was mich irritiert: Weder stopPropagation noch preventDefault kann diesen Geist aufhalten.</p> <p>Muss ich mal tüfteln, ob ich ihm die Aktivität bei Leertaste entziehen kann. Bei Klick soll es wie bisher funktionieren.</p> <p>Linuchs</p> Eventhandler auf document-Ebene Sat, 27 Mar 21 15:09:57 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786432?srt=yes#m1786432 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786432?srt=yes#m1786432 <p>@@Linuchs</p> <blockquote> <p>Muss ich mal tüfteln, ob ich ihm die Aktivität bei Leertaste entziehen kann.</p> </blockquote> <p>Nein. Dass ein Button per Leertaste bedient werden kann, ist gefordertes und von Nutzern erwartetes Standardverhalten und sollte nicht entfernt werden.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Eventhandler auf document-Ebene Sat, 27 Mar 21 15:23:19 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786434?srt=yes#m1786434 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786434?srt=yes#m1786434 <blockquote> <p>Muss ich mal tüfteln, ob ich ihm die Aktivität bei Leertaste entziehen kann. Bei Klick soll es wie bisher funktionieren.</p> </blockquote> <p>Die Idee: Den jeweils anderen Button focussieren:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">aufStart</span><span class="token punctuation">(</span><span class="token string">'lied'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>alle zum Start<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>allePlay<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">playAudios</span><span class="token punctuation">(</span><span class="token string">'lied'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'allePause'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>focus<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>alle play<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token comment"><!-- wenn focus, wirkt die Leertaste als Ausloeser --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>allePause<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">pauseAudios</span><span class="token punctuation">(</span><span class="token string">'lied'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'allePlay'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>focus<span class="token punctuation">;</span> </span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>alle pause<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>Das Fokussieren wird leider ignoriert.</p> <p>Edit: Mit focus() funktioniert's. Endlich.</p> Eventhandler auf document-Ebene Sun, 28 Mar 21 06:14:45 Z https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786470?srt=yes#m1786470 https://forum.selfhtml.org/self/2021/mar/27/eventhandler-auf-inneinander-verschachtelte-elemente/1786470?srt=yes#m1786470 <p>@@Linuchs</p> <blockquote> <p>Die Idee: Den jeweils anderen Button focussieren</p> </blockquote> <p>ist vielleicht auch keine so gute Idee. Finden Nutzer es gut, wenn der Fokus unerwartet ganz woanders ist?</p> <p>Wozu brauchst du überhaupt zwei Buttons? Tut’s nicht einer – ein <a href="https://inclusive-components.design/toggle-button/" rel="noopener noreferrer">Toggle-Button</a>? Beim Drücken startet die Musik, beim nächsten Drücken stoppt sie …</p> <p lang="en"><em>“Design isn’t crafting a beautiful, textured button with breathtaking animation. It’s figuring out if there’s a way to get rid of the button altogether.”</em> —Edward Tufte</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div>