0
113
VistasFirefox: compatibilidad con shadow-DOM
Tengo algo de JavaScript que funciona bien en las versiones actuales de Chrome pero no funciona con Firefox. Los desencadenantes de eventos para pasar el mouse y hacer clic fallan con Firefox, que creo que es un problema de DOM oculto.
Puedo sustituir el código de activación de JavaScript por CSS, que funciona con Firefox (no con Chrome), pero esto no resolverá el problema de los eventos de clic.
¿Cómo se puede lograr aquí la compatibilidad entre navegadores?
let elementsArray = document.querySelectorAll(".icon"); elementsArray.forEach(function(elem) { console.log("getting element -"+String(elem)); elem.addEventListener("mouseenter", function() { elem.setAttribute("style", " filter: grayscale(100%);"); }); elem.addEventListener("mouseout", function() { elem.setAttribute("style", ""); }); elem.addEventListener("click", function() { let hex = this.getAttribute('id'); console.log(hex); }); }); <svg width="600" height="100" > <g id="layer0" class="slide" > <path class="icon" id="y2011_0" d="M 285.0,45.0 300.0,70.98076211353316 285.0,96.96152422706632 255.0,96.96152422706632 240.0,70.98076211353316 255.0,45.0 z" fill="rgba(124,38,10,0.500000)"/> <path class="icon" id="y2011_1" d="M 330.0,19.019237886466843 345.0,45.0 330.0,70.98076211353316 300.0,70.98076211353316 285.0,45.0 300.0,19.019237886466843 z" fill="rgba(124,39,10,0.500000)"/> </g> <use id="use" xlink:href="#layer0" href="#layer0" /> </svg>1 Respuestas
Responde la pregunta0
Mucho menos código y más control si creas el SVG dinámicamente
con un componente web estándar W3C (compatible con todos los navegadores modernos)
<style> svg { background: pink } path { stroke: blue } </style> <game-board> <hexagon x="46" y="0" /> <hexagon x="138" y="0" /> <hexagon x="92" y="26" /> <hexagon x="138" y="52" /> <hexagon x="92" y="78" /> <hexagon x="184" y="26" /> </game-board> <script> customElements.define("game-board", class extends HTMLElement { connectedCallback() { setTimeout(() => { let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.innerHTML = `<style>` + `.hexagon{fill:red}.hexagon:hover{filter:grayscale(100%);cursor:pointer}` + `.hexclicked{fill:green}` + `</style>`; svg.append(...[...this.querySelectorAll("hexagon")].map(hex => { let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", `m${hex.attributes.x.value} ${hex.attributes.y.value} 15 26-15 26-30 0-15-26 15-26z`); path.classList.add("hexagon"); path.onclick = (evt) => path.classList.toggle("hexclicked"); return path; })); this.replaceWith(svg); }) } }) </script> <hexagon> es un elemento desconocido; guardar para usar,
ver: https://dev.to/dannyengelman/web-components-using-unknownhtmlelements-for-better-semantic-html-5d8c