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

四角形をマウスオーバーに応答させたくない場合は、それらの要素で pointer-events を 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

于 2012-10-13T09:39:30.907 に答える