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

Question

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

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

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

有没有办法检测点击何时仅在图像的可见部分上？

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

标签： imagesvgcross-browser

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>