0

我一直对在 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);
}

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

4

1 回答 1

3

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

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

移动LinPt，如果你想再次打开事件，你可以添加这个

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

移动LinEnd

于 2012-10-13T09:39:30.907 回答