Firefox 24.0 onclick沒有正確觸發目標

最近我一直在使用Firefox的一些主要問題。我的代碼在Chrome中運行平穩，但Firefox似乎在查找我點擊的內容時遇到了一些麻煩。你們有沒有聽說過這個？我基本上在div中有一堆SVG。 div有一個onclick事件來調用一個函數，它會觸發，但是在錯誤的div上。所以我點擊右側的div，左側的div接收點擊。Firefox 24.0 onclick沒有正確觸發目標

這裏是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>

你會看到什麼我談論當您單擊SVG的標有「54」的一員，並觸發對SVG爲「57」。如果點擊包含「54」的p標籤，它也會啓動。所以我猜這與SVG有關。

任何想法？（我也知道一切都沒有對齊，我爲此道歉，我只是重寫了它是如何創建路徑標記的，所以在放置它們時我不需要擔心div旋轉，現在一切都放錯了位置）。

來源

2013-09-24 SalmonMode

添加

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

這些線中的每一個

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

之後，這似乎解決它。目前，您正在依靠webkit bug來使代碼正常工作。

來源

2013-09-24 14:15:26

多麼奇怪......我只是覺得SVG自動將這些作爲默認設置，看起來就像它在Chrome中似乎起作用一樣。非常感謝！ – SalmonMode

你並不孤單，但[SVG規範說不同]（http://www.w3.org/TR/SVG/coords.html#ViewportSpace）。請注意，所有的要點都是正確的，所以這意味着未設置寬度不會達到您認爲應該達到的水平。 –

Firefox 24.0 onclick沒有正確觸發目標

回答

相關問題