Hi, I am trying to detect mouse clicks from multiple rects inside an svg parent container, but only the outer parent svg ‘container’ is being detected as the source of the click event. Previously I was able to place an event listener on the entire document using…
document.addEventListener('click', handleClickEvent)
and then I could filter through the various event.target objects (including the child svg rects) in the handleClickEvent function…
function handleClickEvent(event)
{
var target = event.target;
//test if I have the target I want and respond appropriately
}
To demo, in the code below, the target for the click event identified by the UXP debugger is always
svg#myhueselector.colorselectorclass (the outer parent svg, and never the individual squares I have actually clicked on)
<div class="horizContainer0" id="horizontalSelectionDiv">
<svg class="colorselectorclass" id="myhueselector" viewBox="0 0 300 50" width="300px" height="50px" preserveAspectRatio="xMinYMin meet" >
<rect id="colorsquare1" x="2" y="4" fill="rgb(252, 54, 254)" width="30" height="30"></rect>
<rect id='colorsquare2' x="40" y="4" fill="rgb(25, 109, 254)" width="30" height="30"></rect>
<rect id="colorsquare3" x="80" y="4" fill="rgb(25, 133, 254)" width="30" height="30"></rect>
</svg>
</div>
However with UXP I can no longer gain access to the inner svg elements as the only target that is registered as having been clicked is the outer parent svg container.
As a workaround I have begrudgingly begun looping through the child elements and checking if the click location is in the child bounding box, but this solution slowly begins to drift and becomes gradually more erratic and buggy when you apply repeated resizing and scaling to the outer svg container even after applying the appropriate scaling offset requirements from the parent viewBox to the child dimensions. So in the previous CEP version of my code the inner-child-embedded svg elements (‘rects’ in my case) could all be directly identified as click event targets without further and unreliable click location hacking of the parent container.
As another work-around I have also tried adding multiple svg container elements to a div, (each having a single rect as a child), but then the individual svg elements do not neatly scale anymore or keep their position in relation to each other when the div changes sizes the way that happens natively in a container svg - this is the layout hack that I am currently pursuing after a resize() event - but was never needed previously.
As yet another work-around I have also tried to add an individual eventListener to each of the child rects after they have been added to the parent container svg (in code) but click events (and I assume other events) are not being detected when the rect (circle etc) is a child of a parent svg.
I have also tried adding the document eventListener with both true and false in the third parameter
location in the hope of drilling to the child rects from top down to inside the parent svg container - document.addEventListener(‘click’, handleClickEvent, true) - but with no success, it process stops at the parent container.
Has anyone else had these issues with nested SVG events? I am hoping this issue will be fixed as the SVG code base develops for UXP as I am hoping to use SVGs more functionally and not just as button decorations. Thank you for your help 