onmouseenter event triggered on any movement in an SVG use element

  javascript, svg

When the "mouseenter" event is triggered on the green circle a 1 is printed in the console, when it is triggered on the blue circle a 2 is printed in the console. Note that when the mouse enters the green circle, 1 is printed exactly once. When the mouse enters the blue circle any mouse movement within the circle causes a 2 to be printed.

        var gr = document.getElementById("greenOne");
        var bl = document.getElementById("blueOneCopy");
        gr.onmouseenter = function() {gr.parentNode.appendChild(gr); console.log(1);};
        bl.onmouseenter = function() {bl.parentNode.appendChild(bl); console.log(2);};
<html>
  <head>
    <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <svg height="500px" width="500px">
      <defs>
      <circle id="blueOne" cx="100" cy="100" r="50" style="fill: #0091EA"></circle>
      </defs>
      <use id="blueOneCopy" href="#blueOne"></use>
      <circle id="greenOne" cx="150" cy="100" r="50" style="fill: #00C853"></circle>
    </svg>
  </body>
</html>

Source: Ask Javascript Questions

LEAVE A COMMENT