Clicking On-or-Through Image is Browser-Dependent - image

Question

I have found a difference between how Firefox and Chrome handle clicking near an image that I need to fix. I have a rect with an image occupying roughly the top 65%. I preserve the aspect ratio of the image and so it appears narrower than the full rect, which is perfect for what I need.
However, when I click near to the image, in the margin space either side of it, Firefox says I have clicked on the rect whereas Chrome says that I have clicked on the image. Inspecting the elements, I see that the image element spans the full width of the rect in both cases, but it is the functionality in Firefox that I need (as though I'm clicking "through" those image margins).
This is better explained with an example. The code below shows one rect and a narrow image in the top 65%. If I click either side of the image in Firefox, it says that the event.target.nodeName is "use" (I have the rect in a <g>) whereas Chrome says it is "image".
function clickHandler(ev) {
ev = ev || window.event;
alert (ev.target.nodeName);
}
text {
text-anchor: middle;
font-size: 10px;
font-weight: bold;
font-family: "Times New Roman";
pointer-events: none;
}
.m {
stroke: dimgray;
stroke-opacity: 1.0;
stroke-width: 1.5;
fill-opacity: 1.0;
fill: white;
}
<svg id="TreeTest" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="G-Box">
<rect width="80" height="80" rx="5" ry="5"/>
</g>
</defs>
<g id="HenryProctor">
<use tabindex="0" xlink:href="#G-Box" class="m" x="50" y="50" onclick="clickHandler(evt);">
</use>
<text x="90" y="106" dy="1em">Henry</text>
<text x="90" y="106" dy="2em">Proctor</text>
<image x="52.5" y="52.5" width="75" height="51.5" xlink:href="https://parallaxviewpoint.com/Images/Proctor_Henry_b1833.jpg" preserveAspectRatio="xMidYMin meet" onclick="clickHandler(evt);">
</image>
</g>
</svg>
Is there a way to detect when the click was only on the visible part of the image?
[Edited for clarification] I need to distinguish between a click on the visible image and a click anywhere else in the rect. I have my event handler on both, but the action it takes depends on knowing what the user clicked on.

Answer 1

That difference is an interesting quirk that I hadn't noticed before.
Although Firefox's behaviour seems the most useful in this case, I think that Chrome's behaviour follows the spec more accurately. The blank areas on each side of the image are still technically part the "fill" of the <image> element. So clicking there probably should return the "image".
Do you care whether the user clicks on the visible part of the image, or the blank areas beside it? If not, then you could just tell the browser to ignore all click events on the <image> element using:
pointer-events="none"
Now when you click anywhere on the image, in Chrome, you get "use".
function clickHandler(ev) {
ev = ev || window.event;
alert (ev.target.nodeName);
}
text {
text-anchor: middle;
font-size: 10px;
font-weight: bold;
font-family: "Times New Roman";
pointer-events: none;
}
.m {
stroke: dimgray;
stroke-opacity: 1.0;
stroke-width: 1.5;
fill-opacity: 1.0;
fill: white;
}
<svg id="TreeTest" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="G-Box">
<rect width="80" height="80" rx="5" ry="5"/>
</g>
</defs>
<g id="HenryProctor">
<use tabindex="0" xlink:href="#G-Box" class="m" x="50" y="50" onclick="clickHandler(evt);">
</use>
<text x="90" y="106" dy="1em">Henry</text>
<text x="90" y="106" dy="2em">Proctor</text>
<image x="52.5" y="52.5" width="75" height="51.5" xlink:href="https://parallaxviewpoint.com/Images/Proctor_Henry_b1833.jpg" preserveAspectRatio="xMidYMin meet" onclick="clickHandler(evt);"
pointer-events="none">
</image>
</g>
</svg>

Answer 2

SVG content is in shadowDOM, so you can use evt.composedPath() to get the whole Event path.
evt.composedPath()[0] is the Element you clicked.
SO snippets have some delay issues with this; outputting errors in the console, and after a minute the wrong info in the attached SO snippet console.
Update
Argh! OP wants IE support (its 2021, even Microsoft says not to use IE)
For those who want a modern solution with native Web Components, where the IMG is read, and its naturalWidth and naturalHeight are used to generate SVG from a Template
See JSFiddle: https://jsfiddle.net/WebComponents/qv1n9khf/
<person-card img="https://www.gravatar.com/avatar/..."></person-card>
<person-card img="https://www.gravatar.com/avatar/..."></person-card>