data-attribute nach Browserupdate nicht mehr definiert – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 14:13:43 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744844#m1744844 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744844#m1744844 <p>Hallo,</p> <p>ich habe eine Tabelle, in der ich Zellen jeweils den code</p> <p><code><button id='...' data-xyz='' data-zyx=''></code> mitgebe, um später in JS/Jquery hierauf zugreifen zu können.</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> xyz <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-xyz'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das funktionierte lange Zeit sehr gut, aber auf einigen Browsern funktioniert das inzwischen nicht mehr, da xyz bei einem console.log als undefined ausgegeben wird.</p> <p>Hat sich da browserseitig irgendwas verändert, bzw. wie fixe ich das im Code?</p> <p>Ich vermute, dass das <code>this </code>nicht mehr den Button als Objekt referenziert sondern etwas anderes…</p> <p>Pit</p> Lösung mit Link Tue, 19 Mar 19 14:43:23 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744846#m1744846 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744846#m1744846 <p>Wolltest Du <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes" rel="nofollow noopener noreferrer">eigentlich</a> vielleicht etwas wie</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>...<span class="token punctuation">'</span></span> <span class="token attr-name">data-v1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Eins<span class="token punctuation">'</span></span> <span class="token attr-name">data-v2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Zwei<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">alert</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>v2 <span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Hallo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>notieren? Dann sähe das Ergebnis so aus:</p> <p><a href="/images/daff4f38-36ae-466f-bce9-3976c2f287bf.png" rel="noopener noreferrer"><img src="/images/daff4f38-36ae-466f-bce9-3976c2f287bf.png?size=medium" alt="" loading="lazy"></a></p> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 14:50:17 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744848#m1744848 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744848#m1744848 <p>Tach!</p> <blockquote> <p>Hat sich da browserseitig irgendwas verändert, bzw. wie fixe ich das im Code?</p> </blockquote> <p>Nichts das ich wüsste.</p> <blockquote> <p>Ich vermute, dass das <code>this </code>nicht mehr den Button als Objekt referenziert sondern etwas anderes…</p> </blockquote> <p>Überprüf deine Vermutung! Du kannst das <code>this</code> auch über console.log() anzeigen lassen. Mehr kann man erst sagen, wenn du mehr Code zeigst. So ist das nicht nachvollziehbar, worauf das this zeigen könnte.</p> <p>dedlfix.</p> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 15:11:51 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744854#m1744854 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744854#m1744854 <p>Hallo Pit,</p> <p>zunächst mal ist es so, dass .attr("data-xyz") nicht der ideale Weg ist, um auf den Wert von data-Attributen zuzugreifen.</p> <p>Wenn Du nur mit jQuery hantierst, kannst Du die .data Methode verwenden, also z.B. <code>let xyz = $("#...").data("xyz");</code>. Damit kannst Du auch etwas ändern: <code>$("#...").data("xyz", 4711);</code> speichert 4711 für xyz, <strong>aber nicht im data-Attribut</strong>, sondern jQuery-intern. Auslesen mit .data("xyz") liefert den neuen Wert, Auslesen mit .attr("data-xyz") liefert den alten Wert. Das kann gelegentlich nützlich sein.</p> <p>Eine Alternative ist das dataset Attribut im DOM. Wenn Du das DOM Element zum Button hast, kannst Du mit <code>btn.dataset.xyz</code> auf den Wert von data-xyz zugreifen und den Attributinhalt durch Zuweisung auch ändern.</p> <p>Wie kommst Du an das DOM Element heran: <code>$("#...")[0]</code>, oder <code>document.getElementById("...")</code> liefert es Dir. Mit dem <code>this</code> in einem click-Handler musst Du dagegen aufpassen. <code>this</code> enthält das DOM Element, auf dem der click-Handler registriert wurde. Wenn das der Button ist, passt es. Hat das Event aber gebubbelt, enthält <code>this</code> das DOM Element des Containerelements, auf dem der click-Handler registriert wurde.</p> <p>Es ist sicherer, statt this das Event-Objekt zu verwenden, das dem click-Handler mitgegeben wird, und darin das target-Attribut zu verwenden. Das funktioniert gut, solange im Button nur Text steht.</p> <p>FALLS der Button HTML enthält, verhalten sich Chrome und Firefox unterschiedlich. Der eine liefert dann den Button, der andere das Kind-Element. D.h. du musst dann mit .closest('button') sicherstellen, dass Du wirklich auf dem Button landest.</p> <p>Folgendes HTML-Snippet ist valide:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>outer<span class="token punctuation">"</span></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>btnFoo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Don't<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> Click Me <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>div</span><span class="token punctuation">></span></span> </code></pre> <p>Darauf registrieren wir nun Event Handler:</p> <pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"outer"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<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> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"btnFoo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<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>1. Man klickt auf "Click me"</p> <p>Der btnFoo-Handler loggt den Button für this und für e.target. Der outer-Handler loggt das div für this und den button für e.target</p> <p>2. Man klickt auf "Don't"</p> <p>Ich habe gerade keinen Firefox parat, aber soweit ich weiß, ergibt sich kein Unterschied.</p> <p>In Chrome ist es aber so, dass ein Klick auf "Don't" den span für e.target loggt. D.h. man sollte es unterlassen, in Buttons HTML-Innereien einzubauen, oder man muss mit <code>$(e.target).closest("button")</code> ein jQuery-Set mit dem Button beschaffen. In allen Browsern außer Internet Explorer gibt es diese Methode auch nativ im DOM: <code>e.target.closest("button")</code> liefert das DOM Element zum Button.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 14:57:44 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744851#m1744851 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744851#m1744851 <blockquote> <p>Wolltest Du <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes" rel="nofollow noopener noreferrer">eigentlich</a> vielleicht etwas wie</p> </blockquote> <p>Nein...eigentlich wollte ich das schon so, wie ich geschrieben habe. Gebe ich mir this z.b. im FF65 aus, erhalte ich ein "object HTMLButtonElement" (genau das wollte ich auch), gebe ich es im FF66 aus, erhalte ich ein "object HTMLImageElement" (an dieses sind aber keine data-attribute angehängt).</p> <p>Pit</p> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 14:59:54 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744852#m1744852 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744852#m1744852 <p>Tach!</p> <blockquote> <p>Gebe ich mir this z.b. im FF65 aus, erhalte ich ein "object HTMLButtonElement" (genau das wollte ich auch), gebe ich es im FF66 aus, erhalte ich ein "object HTMLImageElement" (an dieses sind aber keine data-attribute angehängt).</p> </blockquote> <p>Daraus kann man schließen, dass in Inneren des Buttons ein Image ist, und vermuten, dass der Eventhandler für dieses Image angeschlagen hat statt für den Button.</p> <p>dedlfix.</p> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 16:03:57 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744862#m1744862 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744862#m1744862 <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</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>btn1<span class="token punctuation">'</span></span> <span class="token attr-name">data-v1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Eins<span class="token punctuation">'</span></span> <span class="token attr-name">data-v2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Zwei<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>img1<span class="token punctuation">'</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>hallo.gif<span class="token punctuation">'</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>3em<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>3rem</span><span class="token punctuation">'</span></span></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 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>btn2<span class="token punctuation">'</span></span> <span class="token attr-name">data-v1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Eins<span class="token punctuation">'</span></span> <span class="token attr-name">data-v2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Zwei<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>img2<span class="token punctuation">'</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>hallo.gif<span class="token punctuation">'</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>3em<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>3rem</span><span class="token punctuation">'</span></span></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 punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">'click'</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>v1 <span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</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">'btn2'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">'click'</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>v2 <span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Geht im Firefox 65 und in Chromium 73.</p> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 15:25:10 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744856#m1744856 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744856#m1744856 <p>Hallo dedlfix,</p> <p>genau so ist es. Ich hatte gerade einen entsprechenden Fiddle gebastelt, aber den brauchts ja nun nicht mehr. Es iost genau, wie Du sagst... was mich wundert ist aber, dass das FF von einer Version auf die andere anders interpretiert.</p> <p>Pit</p> <blockquote> <p>Daraus kann man schließen, dass in Inneren des Buttons ein Image ist, und vermuten, dass der Eventhandler für dieses Image angeschlagen hat statt für den Button.</p> <p>dedlfix.</p> </blockquote> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 15:34:33 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744858#m1744858 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744858#m1744858 <p>Hallo dedlfix,</p> <p>dann hätte der Firefox im jahrealten Streit nachgegeben, um ein einheitliches Verhalten zu bekommen? Mozilla sagte immer, das wäre kein Bug, sondern korrekt. Chrome sagte das Gegenteil.</p> <p>Gerade auf den 66er upgedated und schnell gefiddelt - nö. Nicht gefixt. Bzw. anders gefixt. In jQuery zeigt this immer auf den Button. Aber e.target zeigt im FF66 auf das img, im FF60 dagegen nicht. Ausprobiert mit jQuery 1.9.1, 2.2.4, 3.1.1 und 3.3.1 (geht in JSFiddle ja schnell).</p> <p><code><button><img src="foo" alt="Für Gunnar">Clickme</button></code></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 15:36:36 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744859#m1744859 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744859#m1744859 <p>Hallo Rolf,</p> <p>danke für die lange Erklärung.</p> <p>Ich bau daraus heute abend oder morgen vormittag mal ein paar Tests zusammen, jedenfalls ist meine bisherige Version offensichtlich wirklich nicht "wasserdicht". Ist mir zuletzt schonmal auf dem Handy aufgefallen, da dachte ich aber, es läge an zu trockenen Fingern oder daran, dass ich das kleine image im Button-Element nicht genau getroffen hätte.</p> <p>Hast Du eine Ahnung, warum der FF65/66 hier unterschiedliche Ergebnisse liefert?</p> <p>Pit</p> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 15:41:38 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744860#m1744860 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744860#m1744860 <p>Hallo Pit,</p> <p>ja, siehe oben in der Disku mit dedlfix.</p> <p><a href="https://www.mozilla.org/en-US/firefox/66.0/releasenotes/" rel="nofollow noopener noreferrer">Hier</a> steht es auch:</p> <blockquote> <p>Fixed: <button> element is no longer special cased in event dispatch, per latest specifications</p> </blockquote> <p>Offenbar hat endlich jemand ein Einsehen gehabt und diesen Streit per Spec geschlichtet. FF verhält sich jetzt wie Chrome.</p> <p>Ich habe das im Wiki mal schnell vermerkt, das kann sich als breaking change herausstellen, wenn jemand FF-only programmiert hat.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 16:39:04 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744863#m1744863 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744863#m1744863 <p>Hallo ursus,</p> <p>wie gesagt, im FF66 ist ein breaking change bezüglich e.target. Aber bezüglich jQuery this konnte ich auch keinen feststellen. Das kann auch nicht sein, wenn man sich den jQuery Source anschaut, da wird per apply dafür gesorgt das this immer das Element ist auf dem registriert wurde.</p> <p>Pit??? War das wirklich das von jQuery gesetzt this, von dem wir hier reden?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 19:59:59 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744872#m1744872 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744872#m1744872 <p>Hallo Rolf,</p> <blockquote> <p>Pit??? War das wirklich das von jQuery gesetzt this, von dem wir hier reden?</p> </blockquote> <pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.test'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'img, a, button'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<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 function">alert</span> <span class="token punctuation">(</span><span class="token keyword">this</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> <p>ergibt im FF65 <code>[object HTMLButtonElement]</code> und im 66 <code>[object HTMLImageElement]</code></p> <p>Pit</p> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 20:44:36 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744874#m1744874 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744874#m1744874 <p>Hallo Pit,</p> <p>schönes JavaScript, aber ohne das zugehörige HTML darf man nur raten. Ich rate mal, dass dein HTML so aussieht:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></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 punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bar <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>div</span><span class="token punctuation">></span></span> </code></pre> <p>Und dann musst du genauer hingucken. Es gibt 2 Alerts, einen für das img und einen für den button.</p> <p>Ein click event auf ein img sollst Du nur dann registrieren, wenn es ein usemap Attribut hat, nur solche Images sind interaktiv (ob sie leicht zugänglich sind, ist eine andere Frage). Aber interaktive Element ein einem Button sind vom Inhaltsmodell her verboten.</p> <p>Ein img in einem button sollte niemals eigenständig auf Klicks reagieren.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> data-attribute nach Browserupdate nicht mehr definiert Tue, 19 Mar 19 22:11:14 Z https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744884#m1744884 https://forum.selfhtml.org/self/2019/mar/19/data-attribute-nach-browserupdate-nicht-mehr-definiert/1744884#m1744884 <p>Hallo Rolf,</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></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 punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bar <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>div</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Ja, so in etwa sieht es aus.</p> <blockquote> <p>Und dann musst du genauer hingucken. Es gibt 2 Alerts, einen für das img und einen für den button.</p> <p>Ein click event auf ein img sollst Du nur dann registrieren, wenn es ein usemap Attribut hat, nur solche Images sind interaktiv (ob sie leicht zugänglich sind, ist eine andere Frage). Aber interaktive Element ein einem Button sind vom Inhaltsmodell her verboten.</p> </blockquote> <p>Oh, wußt ich nicht.</p> <blockquote> <p>Ein img in einem button sollte niemals eigenständig auf Klicks reagieren.</p> </blockquote> <p>Ok, dann ist der Fall klar.</p> <pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.test'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'a, button'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<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 function">alert</span> <span class="token punctuation">(</span><span class="token keyword">this</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> <p>ergibt <code>[object HTMLButtonElement]</code> und damit läuft dann auch der Rest wieder einwandfrei.</p> <p>Vielen Dank für Deine Hilfe und guts Nächtle </p> <p>Pit</p>