インタラクティブな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プラグインのように?)
これは、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);