{"componentChunkName":"component---src-templates-tag-template-js","path":"/tag/errata","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"site":{"siteMetadata":{"title":"Philip Ackermann","subtitle":"CTO of Cedalo AG @cedalo_com previously @Fraunhofer_FIT 📚 Java/JavaScript/Node.js book author @rheinwerkverlag 🇩🇪 Blogger @heisedc ⚛️ #NodeJS #React #javascript"}},"allMarkdownRemark":{"edges":[{"node":{"html":"

In Listing 4.3 hat sich ein Fehler eingeschlichen. An den Objekten x und y wird jeweils die Eigenschaft name verwendet, die Konsolenausgaben greifen aber auf die Eigenschaft value zu.

\n
'use strict';\nfunction example(x) {\n    console.log(x.value);\n    x.name = 5;\n    console.log(x.value);\n}\nlet y = {\n    name: 4711\n};\nconsole.log(y.value);\nexample(y);\nconsole.log(y.value);
\n

Damit das Listing zum Text passt, muss einheitlich die gleiche Eigenschaft verwendet werden:

\n\n
'use strict';\nfunction example(x) {\n    console.log(x.value);\n    x.value = 5;\n    console.log(x.value);\n}\nlet y = {\n    value: 4711\n};\nconsole.log(y.value);\nexample(y);\nconsole.log(y.value);
\n
","fields":{"slug":"/posts/javascript-handbook/errata-object-properties","categorySlug":"/category/java-script-handbuch/"},"frontmatter":{"title":"Zugriff auf Objekteigenschaften in Listing 4.3","date":"2017-09-19T22:40:00.000Z","category":"JavaScript Handbuch","description":""}}},{"node":{"html":"

Heute wies mich ein Leser darauf hin, dass es bei dem Drag&Drop-Beispiel aus Listing 12.43 (HTML) und Listing 12.44 (JavaScript) in Firefox Probleme gibt bzw. folgender Code so nicht funktioniert:

\n
target.addEventListener('drop', function(event) {\n    if(event.target.id === 'target') {\n        // Funktioniert nicht in Firefox\n        event.srcElement.innerHTML += event.dataTransfer.getData('text/html');\n    }\n    onLeave(event);\n})
\n\n

Der Grund dafür ist, dass die Eigenschaft srcElement eine proprietäre Eigenschaft des Internet Explorers ist und daher nicht von allen Browsern unterstützt wird. Stattdessen sollte (wie im übrigen Listing auch) die Eigenschaft target aus dem DOM Standard verwendet werden:

\n
target.addEventListener('drop', function(event) {\n    if(event.target.id === 'target') {\n        // Funktioniert in Firefox und anderen Browsern\n        event.target.innerHTML += event.dataTransfer.getData('text/html');\n    }\n    onLeave(event);\n})
\n

Alternativ lässt sich als Fallback für ältere Internet Explorer auch die Schreibweise event.target || event.srcElement verwenden.

\n
target.addEventListener('drop', function(event) {\n    let targetElement = event.target || event.srcElement;\n    if(targetElement.id === 'target') {\n        targetElement.innerHTML += event.dataTransfer.getData('text/html');\n    }\n    onLeave(event);\n})
\n

Konsequenterweise ist es dann sinnvoll, entsprechendes Konstrukt auch in den anderen Event-Listenern zu verwenden:

\n
target.addEventListener('dragenter', function(event) {\n    let targetElement = event.target || event.srcElement;\n    targetElement.classList.add('dragover');\n});\nfunction onLeave(event) {\n    let targetElement = event.target || event.srcElement;\n    targetElement.classList.remove(\"dragover\");\n}
\n
\n

Merke

\n

Die Eigenschaft srcElement ist nicht im DOM Standard definiert und sollte daher nicht bzw. wenn dann nur als Fallback in Produktivsystemen verwendet werden.

\n
","fields":{"slug":"/posts/javascript-handbook/drag-and-drop/","categorySlug":"/category/java-script-handbuch/"},"frontmatter":{"title":"Drag&Drop-Beispiel in Firefox","date":"2017-04-12T16:50:00.000Z","category":"JavaScript Handbuch","description":""}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"tag":"Errata","currentPage":0,"postsLimit":5,"postsOffset":0,"prevPagePath":"/tag/errata","nextPagePath":"/tag/errata/page/1","hasPrevPage":false,"hasNextPage":false}}}