title: How to prevent events in Javascript+SVG
body: <p>I've been confused with preventing unwanted events in SVG. To be short, on <a href="http://3lectronics.com/sof/prevDef.svg" rel="nofollow">http://3lectronics.com/sof/prevDef.svg</a> you may see example. Try to click on circle and draw line over the rectangles. While hovering, they becomes white.</p>
  
  <p>Events are firing and I want them dead! 
  Please show me what to do to shut down events on other elements while drawing the line.</p>
  
  <p>SVG code</p>
  
  <pre><code>&lt;svg id  ="svgRoot" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="load(evt)" &gt;
  
      &lt;script type="text/ecmascript" xlink:href="prevDef.js"/&gt;
  
      &lt;rect x="0" y="0" width="100%" height="100%" fill="#009399"/&gt;
  
      &lt;rect id="R" x="150" y="150" width="200" height="30" fill="khaki" onmouseover="this.setAttribute('fill', 'white')" onmouseout="this.setAttribute('fill', 'khaki')"/&gt;
      &lt;circle cx="250" cy="75" r="50" fill="blue" onclick="drawLine(evt)"/&gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p>JS code</p>
  
  <pre><code>var newL;
  var xmlns="http://www.w3.org/2000/svg"; 
  var cont=document.getElementById("svgRoot");
  
  function load(evt) {
    var rect=document.getElementById("R");
    var offset=40;
    for (var i=1;i&lt;7;i++) {
      var newR=rect.cloneNode(true);
      newR.setAttributeNS(null, "y", 150+i*offset);
      cont.appendChild(newR);
    }
  }
  function drawLine(evt) {
    if (window.svgDocument == null) svgDocument=evt.target.ownerDocument;
    newL=svgDocument.createElementNS(xmlns, "line");
    newL.setAttributeNS(null, "stroke", "black");
    newL.setAttributeNS(null, "x1", evt.clientX);
    newL.setAttributeNS(null, "y1", evt.clientY);
    newL.setAttributeNS(null, "x2", evt.clientX);
    newL.setAttributeNS(null, "y2", evt.clientY);
    newL.setAttributeNS(null, "stroke-width", "1");
    cont.appendChild(newL);
    cont.setAttributeNS(null, "onmousemove", "moveLinPt(evt)");
  }
  function moveLinPt(evt) {
    newL.setAttributeNS(null, "x2", evt.clientX);
    newL.setAttributeNS(null, "y2", evt.clientY);
    cont.setAttributeNS(null, "onclick", "moveLinEnd()");
  }
  function moveLinEnd() {
    cont.setAttributeNS(null, "onmousemove", null);
    cont.setAttributeNS(null, "onclick", null);
  }
  </code></pre>
  
  <p>But, try link above.</p>