I have just two elements, a div with an object attached as child, which contains an SVG image. The click handler works fine when there is just the div by itself, or another tag as it's child, such as img. However, when the object is a child, the div click handler is only triggered in the very bottom right corner. I'm really stuck as to what would be causing this behavior.
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!');
}
here is the working code
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!');
});