单击直通图像取决于浏览器

Question

我发现 Firefox 和 Chrome 处理在我需要修复的图像附近单击的方式有所不同。我有一个矩形，其图像约占前 65%。我保留了图像的纵横比，因此它看起来比完整的矩形更窄，这非常适合我的需要。

但是，当我在图像附近单击时，在图像两侧的边距空间中，Firefox 说我单击了矩形，而 Chrome 说我单击了图像。检查元素，我发现图像元素在两种情况下都跨越了矩形的整个宽度，但我需要的是 Firefox 中的功能（好像我正在单击“通过”这些图像边距）。

用一个例子可以更好地解释这一点。下面的代码在前 65% 中显示了一个矩形和一个窄图像。如果我在 Firefox 中单击图像的任一侧，它会说 event.target.nodeName 是“使用”（我在 <g> 中有矩形），而 Chrome 说它是“图像”。

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>

有没有办法检测点击只在图像的可见部分？

[为澄清而编辑] 我需要区分单击可见图像和单击矩形中其他任何位置。我在两者上都有我的事件处理程序，但它采取的行动取决于知道用户点击了什么。

Answer 1

这种差异是我以前没有注意到的一个有趣的怪癖。

虽然 Firefox 的行为在这种情况下似乎最有用，但我认为 Chrome 的行为更准确地遵循规范。图像每一侧的空白区域在技术上仍然是<image> 元素的“填充”部分。所以点击那里可能应该返回“图像”。

您是否关心用户点击的是图像的可见部分还是旁边的空白区域？如果没有，那么您可以告诉浏览器忽略 <image> 元素上的所有点击事件：

pointer-events="none"

现在，当您在 Chrome 中单击图像上的任意位置时，您会得到“使用”。

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 内容在 shadowDOM 中，因此您可以使用evt.composedPath() 获取整个事件路径。

evt.composedPath()[0] 是您点击的元素。

所以 sn-ps 有一些延迟问题；在控制台中输出错误，一分钟后在附加的 SO sn-p 控制台中输出错误信息。

更新

啊！ OP 想要 IE 支持（它的 2021 年，连微软都说不使用 IE）

对于那些想要使用原生 Web 组件的现代解决方案的人来说，IMG 被读取，其 naturalWidth 和 naturalHeight 用于从模板生成 SVG

参见 JSFiddle：https://jsfiddle.net/CustomElementsExamples/1g52eby4/

<person-card img="https://www.gravatar.com/avatar/..."></person-card>
<person-card img="https://www.gravatar.com/avatar/..."></person-card>