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

Question

我想创建一个显示交互式svg的网页：因为可以使用几个svg，所显示的各种对象将具有不同的ID，所以事件监听器（例如捕捉鼠标点击）必须是动态的。

从this snippet

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的“每个”功能可能是一个合适的选择，但似乎jQuery不会处理SVG DOM这么好。有没有其他可用的选项？ （如jQuery插件？）

Answer 1

这是我添加事件侦听器为SVG香草JS元素优选结构...

// 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);