Question

我最近遇到了一些与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时，您会看到我正在谈论的内容，并且它会在SVG上触发“57”。如果单击包含“54”的p标记，它也会触发。所以我猜这与SVG有关。

有什么想法吗？

（另外，我知道一切都是未对齐的，我为此道歉。我只是重写了它如何创建路径标记，所以在放置它时我不需要担心div旋转，现在一切都放错了地方。）< / p>

Answer 1

添加

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

在每一行之后

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

这似乎解决了这个问题。目前，您依赖webkit错误来使代码正常工作。

Firefox 24.0 onclick没有触发正确的目标

1 个答案: