Javascript 如果捕获了onclick事件以在SVG文档中进行缩放和平移，如何到达锚href？_Javascript_Svg_Dom Events

Javascript 如果捕获了onclick事件以在SVG文档中进行缩放和平移，如何到达锚href？

javascript svg

Javascript 如果捕获了onclick事件以在SVG文档中进行缩放和平移，如何到达锚href？,javascript,svg,dom-events,Javascript,Svg,Dom Events,我有一个SVG文档，其中我使用javascript实现了缩放和平移功能[改编自Andrea Leofreddi的SVGPan库]。SVG本身有一个锚元素，它应该启动一个单独的url。我的问题是，由于onclick事件被捕获用于缩放和平移，因此无法到达锚上的href。如何将锚与onclick陷阱隔离在下面的代码中，当我单击文本“Kitchen Sink”时，我希望启动附加到它的url，而不是进入缩放和平移模式：代码片段： SVGLib.js： ... setupHandlers(root);

我有一个SVG文档，其中我使用javascript实现了缩放和平移功能[改编自Andrea Leofreddi的SVGPan库]。SVG本身有一个锚元素，它应该启动一个单独的url。我的问题是，由于onclick事件被捕获用于缩放和平移，因此无法到达锚上的href。如何将锚与onclick陷阱隔离

在下面的代码中，当我单击文本“Kitchen Sink”时，我希望启动附加到它的url，而不是进入缩放和平移模式：

代码片段：

SVGLib.js：

...
setupHandlers(root);

function setupHandlers(root){
    setAttributes(root, {
        "onclick" : "handleClick(evt)"
    });
        root.addEventListener('DOMMouseScroll', handleMouseWheel, false); 
}


function handleClick(evt) {

    if(evt.preventDefault)
        evt.preventDefault();
    evt.returnValue = false;

    var svgDoc = evt.target.ownerDocument;
    var g = getRoot(svgDoc);

        // Get the click location
        // If key button clicked with shift key down, reset
        if (evt.shiftKey == 1) {
                setCTM(g, root.createSVGMatrix());
                shiftX = initShiftX;
                shiftY = initShiftY;
        }
        else {
                var ctm = g.getCTM();
                var ctmInv = ctm.inverse();
                var newctm = g.getCTM();
                // showMatrix('before: ', newctm);
                shiftX = shiftX - (evt.clientX - initShiftX);
                shiftY = shiftY - (evt.clientY - initShiftY);
                newctm.e = shiftX * vbCTMInv.a;
                newctm.f = shiftY * vbCTMInv.d;
                // bring in the scale factors from the vbCTMInv -- because scaling will apply automatically via the vb transform
                newctm.a = newctm.a*vbCTMInv.a;
                newctm.d = newctm.d*vbCTMInv.d;
                // showMatrix('after: ', newctm);
                setCTM(g, newctm);
        }
}

doc.html：

<html>
...
<svg>
...
        <g id="g33" style="fill: none; stroke: green">
            <a xlink:href="/cgi-bin/qbui/drive.pl?sqlHandle=693F1DB6-6C7F-11E1-8475-31DDD99CA768">
                <text id="t2769800058" style="text-anchor: middle; font-family: Verdana; font-size: 10px" x="600" y="1300">Kitchen Sink</text>
            </a>
        </g>
...
</svg>
</html>

您可以检查evt.target的href值是否有值，以及是否有跟随值

function handleClick(evt) {
  if(evt.target.href){
    window.location = evt.target.href;
  }

谢谢根据您的建议，我有以下工作代码：`if（evt.target.parentNode.getAttribute（“xlink:href”）{window.open（evt.target.parentNode.getAttribute（“xlink:href”）；}`

function handleClick(evt) {
  if(evt.target.href){
    window.location = evt.target.href;
  }