Solo tengo dos elementos, un div con un object adjunto como elemento secundario, que contiene una imagen SVG. El controlador de clics funciona bien cuando solo existe el div u otra etiqueta secundaria, como img . Sin embargo, cuando el object es un elemento secundario, el controlador de clic div solo se activa en la esquina inferior derecha. Estoy realmente atascado en cuanto a lo que podría estar causando este comportamiento.
let divContainer = document.createElement('div'); divContainer.className = 'divContainer'; divContainer.style.position = 'absolute' divContainer.style.top = '100px'; divContainer.style.width = '150px'; divContainer.style.height = '150px'; divContainer.style.background = 'green'; let imageChild = document.createElement('object'); imageChild.type = 'image/svg+xml'; imageChild.data = 'https://svgsilh.com/svg_v2/48363.svg' imageChild.className = 'imageChild'; imageChild.style.width = 'inherit'; document.body.append(divContainer); // Comment this out, and it works fine divContainer.append(imageChild); divContainer.onclick = function(event) { console.log('Click OK!'); }aquí está el código de trabajo
let divContainer = document.createElement('div'); divContainer.className = 'divContainer'; divContainer.style.top = '100px'; divContainer.style.width = '150px'; divContainer.style.height = '150px'; divContainer.style.background = 'green'; let imageChild = document.createElement('object'); imageChild.type = 'image/svg+xml'; imageChild.data = 'https://svgsilh.com/svg_v2/48363.svg'; imageChild.className = 'imageChild'; imageChild.style.width = 'inherit'; imageChild.style.pointerEvents = 'none'; document.body.append(divContainer); // Comment this out, and it works fine divContainer.append(imageChild); divContainer.addEventListener('click', function () { alert('Click OK!'); });