web-dev-qa-db-ja.com

svgのオブジェクトにイベントリスナーを追加する方法

インタラクティブなsvgを表示するWebページを作成したいと思います。いくつかの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の「各」関数が適切なオプションである可能性がありますが、JQueryはsvg DOMをあまりうまく処理していないようです。他に利用できるオプションはありますか？ （jQueryプラグインのように？）

javascriptjqueryhtmlsvg
20
mgalardini

これは、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);
15
methodofaction