Firefox 24.0 onclick 未在正确的目标上触发答案

【问题标题】：Firefox 24.0 onclick not firing on the right targetFirefox 24.0 onclick 未在正确的目标上触发
【发布时间】：2013-09-24 22:15:26
【问题描述】：

我最近在使用 Firefox 时遇到了一些重大问题。我的代码在 Chrome 中运行流畅，但 Firefox 似乎无法确定我在点击什么。你们听说过这个吗？我基本上在 div 中有一堆 SVG。 div 有一个 onclick 事件来调用一个函数，该函数会触发，但在错误的 div 上。所以我点击右侧的 div，左侧的 div 接收点击。

这里是javascript

http://pastebin.com/wbYnqT4B

这里是 HTML

http://pastebin.com/aXMyYtS8

它会生成这些元素并将它们定位在整个页面中，当单击时，应该会出现一个包含有关元素信息的框。但其他元素似乎声称是事件目标，尽管我点击了数百像素之外的元素。

<div id="6-084" class="room" fullname="John Smith" phonenum="None" pcname="Unknown" wallplatenum="Unknown" onclick="displayInfo(event)" style="height: 72px; width: 96px; position: absolute; left: 753px; top: 236px; opacity: 1;">
    <svg id="6-084-svg" style="-webkit-backface-visibility: hidden;" class="room">
        <g id="6-084-svg-g">
            <path style="fill:none; stroke: black; stroke-width: 2;" d="M 95,1 L 95,51 Q 80,51 80,66 L 95,66 L 95,71 L 1,71 L 1,1 Z "></path>
        </g>
    </svg>
    <div id="6-084 divP" style="position: absolute; z-index: 2; top: 20.5px; left: 34px;">
        <p id="6-084 P" style="text-align:center;">Name</p>
    </div>
</div>

当您单击标有“54”的 SVG 并在“57”的 SVG 上触发时，您会确切地看到我在说什么。如果您单击包含“54”的 p 标签，它也会触发。所以我猜这与 SVG 有关。

有什么想法吗？

（另外，我知道所有内容都未对齐，对此我深表歉意。我只是重写了它创建路径标签的方式，因此在放置它们时我不需要担心 div 旋转，现在所有内容都放错了位置。）

【问题讨论】：

标签： javascript firefox html svg onclick

【解决方案1】：

添加

svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");

在每一行之后

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

这似乎可以解决问题。目前，您的代码工作依赖于 webkit 错误。

【讨论】：

多么奇怪...我只是认为 SVG 会自动将这些设置为默认值，因为这就是它在 Chrome 中的工作方式。非常感谢！
你并不孤单，但是SVG specification says different。请注意，所有要点都是正确的，因此这意味着未设置宽度不会做您认为应该做的事情。