22

インタラクティブな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の「each」関数は適切なオプションかもしれませんが、JQueryはsvgDOMをあまりうまく処理していないようです。他に利用可能なオプションはありますか？（JQueryプラグインのように？）

4

1 に答える 1

20

これは、バニラ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);
于 2012-09-17T16:12:36.063 に答える