如何向svg中的对象添加事件监听器？
如何向svg中的对象添加事件监听器？
提问于 2012-09-17 08:26:36
我想创建一个显示交互式svg的网页:由于可能会使用多个svg，因此显示的各种对象将具有不同的I，因此事件侦听器(例如，捕捉鼠标单击)必须是动态的。
从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的所有对象(可能有一个特定的类)，并为它们附加一个even侦听器。
更新
所以JQuery 'each‘函数可能是一个合适的选择，但是看起来JQuery并没有很好地处理svg。还有没有其他可用的选项？(就像JQuery插件一样？)
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-18 00:12:36
这是我用普通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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12451855
复制相关文章
相似问题
腾讯云开发者
