title: d3 mouseover on element conflicts with svg mousemove
body: <p>I have attached a mouseover event to an element - say, a circle - within the SVG element. I also need a "mousemove" event handler associated with the SVG element/"background" itself. However, they seem to conflict: when mousing over the circle, the handler attached to the circle does not supersede that associated with the SVG element itself.</p>
  
  <p>How do I get the circle's mouseover to supersede the SVG element's event handler? I need them both, but only want the mouseover to be triggered over the circle and the mousemove to be triggered by movement anywhere else in the SVG element.</p>
  
  <p>A simplified example can be seen in this JSFiddle: <a href="http://jsfiddle.net/aD8x2/" rel="nofollow">http://jsfiddle.net/aD8x2/</a> (JS code below). If you click on a circle (starting a line) and then mouse over another circle, you will see the flickering of color associated with both events being triggered when mousing over the circle.</p>
  
  <pre><code>var svg = d3.select("div#design")
              .append("svg")
              .attr("width", "500").attr("height", "500");
  
  svg.selectAll("circle").data([100, 300]).enter().append("circle")
      .attr("cx", function(d) { return d; })
      .attr("cy", function(d) { return d; })
      .attr("r", 30)
      .on("mouseover", function () {
      d3.select(this).attr("fill", "red");
      })
      .on("mouseout", function() {
      d3.select(this).attr("fill", "black");
      })
      .on("click", function() {
      svg.append("line")
         .attr(
          {
          "x1": d3.select(this).attr("cx"),
          "y1": d3.select(this).attr("cy"),
          "x2": d3.select(this).attr("cx"),
          "y2": d3.select(this).attr("cy")
          })
         .style("stroke-width", "10")
         .style("stroke", "rgb(255,0,0)");
      });
  
  
      svg.on("mousemove", function() {
          var m = d3.mouse(this);
  
          svg.selectAll("line")
             .attr("x2", m[0])
             .attr("y2", m[1]);
      });
  </code></pre>