Question

我想创建一个显示交互式svg的网页：由于可能会使用多个svg，因此显示的各种对象将具有不同的ID，因此事件侦听器（例如，用于捕获鼠标）必须是动态的

开始

var a = document.getElementById("alphasvg");
a.addEventListener("load",function(){
        var svgDoc = a.contentDocument;
        var delta = svgDoc.getElementById("delta");
        delta.addEventListener("click",function(){alert('hello world!')},false);
    },false);

我想找到一种方法来遍历svg的所有对象（可能有一个特定的类）并为它们附加一个偶数监听器。

更新

所以JQuery'each'函数可能是一个合适的选项，但似乎JQuery不能很好地处理svg DOM。还有其他可用选项吗？（就像一个JQuery插件？）

Answer 1

这是我使用vanilla js ...添加事件监听器到SVG元素的首选结构。

// select elements
var elements = Array.from(document.querySelectorAll('svg .selector'));

// add event listeners
elements.forEach(function(el) {
   el.addEventListener("touchstart", start);
   el.addEventListener("mousedown",  start);
   el.addEventListener("touchmove",  move);
   el.addEventListener("mousemove",  move);
})

// event listener functions

function start(e){
  console.log(e);
  // just an example
}

function move(e){
  console.log(e);
  // just an example
}

您提供的示例代码有点人为，但这是一个重写，使其工作......

var a = document.getElementById("alphasvg");
a.addEventListener("load",function(){
  var svgDoc = a.contentDocument;
  var els = svgDoc.querySelectorAll(".myclass");
  for (var i = 0, length = els.length; i < length; i++) {
    els[i].addEventListener("click", 
       function(){ console.log("clicked"); 
    }, false);
  }
},false);

如何将事件侦听器添加到svg中的对象？

1 个答案: