首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何向svg中的对象添加事件监听器?

如何向svg中的对象添加事件监听器?
EN

Stack Overflow用户
提问于 2012-09-17 08:26:36
回答 1查看 34.3K关注 0票数 22

我想创建一个显示交互式svg的网页:由于可能会使用多个svg,因此显示的各种对象将具有不同的I,因此事件侦听器(例如,捕捉鼠标单击)必须是动态的。

this snippet开始

代码语言:javascript
复制
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插件一样?)

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-09-18 00:12:36

这是我用普通js向SVG元素添加事件侦听器的首选结构……

代码语言:javascript
复制
// 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
}

您提供的示例代码有点做作,但这里有一个重写,使其工作...

代码语言:javascript
复制
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);
票数 20
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12451855

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档