如何預防Javascript + SVG中發生的事件

我一直在阻止SVG中不需要的事件。簡而言之，在http://3lectronics.com/sof/prevDef.svg你可能會看到一個例子。嘗試點擊圓形並在矩形上畫線。徘徊時，它們變成白色。如何預防Javascript + 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); 
}

但是，嘗試上面的鏈接。

來源

2012-10-13 Alex

爲什麼不直接刪除事件偵聽器你不感興趣？無關的問題：爲什麼你設置「onclick」等等而不是使用Element.addEventListener（...）？ –

嗯，我認爲這是將事件監聽器添加到標記的「正確」方式，並且不想冒險。謝天謝地，你告訴我不要成爲SVG標記的奴隸，我想到了。如果我說得對，你建議我管理所有事件programmaticaly？感謝這裏（都）。 – Alex

如果您不希望矩形對mouseover作出響應，請在這些元素上將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"); 
}

到moveLinEnd

來源

2012-10-13 09:39:30

是的，我知道。但在我的應用程序中，有不同的元素，在不同的組中......以不同的svg標籤。應該有另一種解決方案。那麼preventDefault，stopPropagation ......或者類似tis的東西呢？ – Alex

在這種情況下，您可以創建一個可見性隱藏矩形，並將其粘貼到其他所有其他位置，以防止它們獲取鼠標事件。 –

對不起......我不能接受......不，絕對不是:-( – Alex

如何預防Javascript + SVG中發生的事件

回答

相關問題