0

最近、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の回転を心配する必要はありません。今ではすべてが間違っています。）

4

1 に答える 1

1

追加

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

これらの行のすべての後に

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

そして、それはそれを修正するようです。現時点では、コードが機能するために webkit のバグに依存しています。

于 2013-09-24T14:15:26.790 に答える