javascript - 如何防止 Javascript+SVG 中的事件

Question

我对防止 SVG 中发生不需要的事件感到困惑。简而言之，关于http://3lectronics.com/sof/prevDef.svg你可能会看到例子。尝试单击圆形并在矩形上画线。悬停时，它们会变成白色。

事件正在发生，我希望他们死掉!请告诉我如何在画线时关闭其他元素上的事件。

SVG 代码

<svg id  ="svgRoot" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="load(evt)" >

    <script type="text/ecmascript" xlink:href="prevDef.js"/>

    <rect x="0" y="0" width="100%" height="100%" fill="#009399"/>

    <rect id="R" x="150" y="150" width="200" height="30" fill="khaki" onmouseover="this.setAttribute('fill', 'white')" onmouseout="this.setAttribute('fill', 'khaki')"/>
    <circle cx="250" cy="75" r="50" fill="blue" onclick="drawLine(evt)"/>
    </svg>

JS代码

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<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);
}

但是，请尝试上面的链接。

Answer 1

如果您不希望矩形响应鼠标悬停，请将这些元素上的指针事件设置为 none。对于您的示例，您可以添加此

var rects = document.getElementsByTagName("rect") 
for (var i = 0; i < rects.length; i++) {
    rects[i].setAttribute("pointer-events", "none");
}

到 moveLinPt，如果你想再次打开事件，你可以添加这个

var rects = document.getElementsByTagName("rect") 
for (var i = 0; i < rects.length; i++) {
    rects[i].setAttribute("pointer-events", "visiblePainted");
}

移动LinEnd