onclick去除/附加子元素時不工作

我有一個簡單的* .svg文件，裏面有一些javascript代碼。有6個圈子，它們部分重疊。當某個圓圈發生混亂事件時，此圓圈應出現在頂部。這工作得很好。這裏是我的代碼：onclick去除/附加子元素時不工作

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    width="400" height="300"> 

    <script> 
      function mouseOver(evt) { 
       var parent = evt.target.parentNode; 
       parent.removeChild(evt.target); 
       parent.appendChild(evt.target); 
      } 

      function click(evt) { 
       alert("CLICKED"); 
      } 
    </script> 

<g id="myCircles" stroke="none" onclick="click(evt)" onmouseover="mouseOver(evt)"> 
    <circle id="circ1" cx="150" cy="100" r="50" fill="red"/> 
    <circle id="circ2" cx="100" cy="60" r="30" fill="yellow"/> 
    <circle id="circ3" cx="200" cy="150" r="80" fill="blue"/> 
    <circle id="circ4" cx="160" cy="190" r="70" fill="green"/> 
    <circle id="circ5" cx="100" cy="220" r="10" fill="gray"/> 
    <circle id="circ6" cx="80" cy="90" r="20" fill="black"/> 
</g> 
</svg>

但是，如果我用這個mouseOver功能onclick事件不工作了。我想這與DOM結構中元素的去除和結合有關。如果我取消註釋mouseOver(evt)中的代碼，則會觸發onclick事件。任何人都知道如何解決這個問題？

編輯：有趣的是，當我使用onmousedown而不是onclick事件時，一切正常！有人可以解釋爲什麼嗎？

來源

2014-10-29 Moonlit

我猜你是如果你評論鼠標的東西嗎？ – 2014-10-29 14:25:09

您知道何時啓動您的函數，然後刪除該子項，該事件處理程序也將被刪除。意思是，你沒有點擊事件和鼠標懸停事件。你必須將它們添加回來。 – 2014-10-29 14:27:45

首先，處理程序位於父項上，因此刪除子項不會影響它們。其次，事件處理程序（如果它們在孩子身上）將在元素被讀取時恢復（當然是UA模塊的錯誤）。 – 2014-10-29 15:17:30

-1

您可以使用z-index屬性將選定的圓圈置頂。如果您使用.css文件中，添加的z指數，並在鼠標懸停事件的初始值設定爲相同的值（比方說，「1」）

z-index:1;

，改變z索引到一個更高的價值（比如'5'）將其彈出到圓圈堆棧頂部。在mouseout事件中，將z-index重置爲1，最後使用mousedown事件產生您的警報「Clicked」。

來源

2014-10-29 13:00:46

SVG沒有z-index屬性。它被提議用於SVG 2，但我不確定任何東西都實現了SVG 2的那一部分。 – 2014-10-29 14:24:00

onclick去除/附加子元素時不工作

回答

相關問題