如何将事件侦听器添加到svg中的对象？ [英] How to add event listeners to objects in a svg?

问题描述

我想创建一个显示交互式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的所有对象（可能有一个特定的class），并附加一个监听器。

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

解决方案

这是我的首选结构，用于将事件监听器添加到带有香草js的SVG元素中。

  //选择元素
 var elements = Array.from（document.querySelectorAll（'svg .selector'）） ; 
 
 //添加事件监听器
 elements.forEach（function（el）{
 el.addEventListener（touchstart，start）; 
 el.addEventListener（ mousedown，start）; 
 el.addEventListener（touchmove，move）; 
 el.addEventListener（mousemove，move）; 
}）
 
 //事件监听器函数
 
函数start（e）{
 console.log（e）; 
 //只是一个例子
} 
 
函数move（e）{
 console.log（e）; 
 //只是一个示例
} 
  

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

  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）; 
  

I would like to create a web page displaying an interactive svg: since several svg may be used, the various objects displayed will have different IDs, so the event listeners (to catch a mouse click, for example) have to be dynamic.

Starting from 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);

I would like to find a way to cycle through all the objects of the svg (maybe having a particular class) and attach an even listener to them.

update

So JQuery 'each' function may be a suitable option, but it seems that JQuery doesn't handle the svg DOM so well. Is there any other available option? (like a JQuery plugin?)

解决方案

This is my preferred structure for adding event listeners to SVG elements with vanilla 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
}

The sample code you present is somewhat contrived, but here's a rewrite that makes it work...

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中的对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！