He importado un svg como objeto en HTML:
<object data="mySVG.svg" type="image/svg+xml" id="circle"> <img src="mySVG.svg" /> </object>y estoy tratando de establecer un detector de eventos en toda la página:
window.addEventListener('click', function(){ alert('Hello') })El problema es que el objeto bloquea el detector de eventos y cuando el usuario hace clic en la imagen, la alerta no se dispara. Pero cuando el usuario hace clic en cualquier otro lugar o sobre otros elementos, se dispara la alerta. ¿Cómo puedo hacer que el objeto actúe como los otros elementos y no bloquee el detector de eventos?
Intenté esperar después de que el objeto se está cargando y luego configuré el detector de eventos, pero no funcionó.
Si importo el SVG directamente a HTML con la etiqueta svg, funciona, pero el svg es demasiado grande y hace que el código HTML sea realmente complicado. Tampoco puedo usar la etiqueta img porque también estoy interactuando con partes del SVG con JS más adelante.
Como se puede ver en este codepen que hice: https://codepen.io/Dimertuper/pen/rNJoLrK (Cuando haces clic fuera de la imagen se dispara, dentro de la imagen no)
Según los requisitos de OP -
Podemos hacer esto eliminando la etiqueta del objeto como un elemento en el que se puede hacer clic con CSS pointer-events: none; .
object { pointer-events: none; }Prueba esto:
document.addEventListener('click', function(){ alert('Hello') }) Hay una diferencia entre document y window . El document se utiliza para acceder a cualquier elemento HTML en la página web, mientras que la window representa el marco del navegador. Entonces, cuando hace clic en el botón (elemento HTML) usando window , no funciona.
Ver también: Diferencias entre documentos y objetos de ventana
Este enlace tiene solución. Usando un div transparente para cubrir la imagen del objeto, o use directamente la imagen svg en su lugar.
Revisé la especificación del elemento del objeto. Es para el uso de contenido externo incrustado. Por lo tanto, tiene la capacidad de cargar un documento completo, su caso se carga como imagen. La propiedad disponible para vincular eventos para este elemento es contentDocument o getSvgDocument(). Ambos son nulos en su caso, ya que se cargan como imagen svg.
document.getElementsByTagName("object")[0].contentDocumentConsulta este enlace para más detalles. Espero que esto te ayude.