SVGをクリックするとそのSVGがCanvasに描画される、というクリックイベントを作りたいのですが、苦戦中です。
それぞれのSVGのタグ内に直接「onClick=”関数()”」と書けば簡単なのですが、SVG要素は大量（500～1000）なので、すごく無駄な気がします。
JavaScriptのgetElementTagName()関数でSVG要素を取得してイベントリスナーを追加しても良いのですが、大量のループ処理なのでどうも微妙な感じがします。
そこで、SVG要素を包括する親要素（DIVなど）にIDを付けて、その親要素に対してイベントリスナーを追加します。
イベントリスナーは追加した要素の子要素に対しても効果があるので、イベントをまとめて拾えるんですね。
しかしこれを実装してみると、問題が発生しました。
SVGをクリックした時に、SVGの子要素の「rect」や「circle」など図形の要素でイベントが発生してしまうのです。
これに対処するために、イベントが発生したエレメントのタグネームを調べて、タグネームがSVGになるまで親要素を遡っていくという方法を試しました。
これでバッチリ、SVG要素を取得してcanvasに表示することができるようになりました。
しかし、スマートフォンで見てみると別の問題が発生しました。
SVG要素をタップすることはできるのですが、タップした瞬間、大枠のDIVの枠線に色が付き、大枠部分をタップしたかのような見た目になるのです。
見た目だけの問題ですが、これは気持ち悪い。。
素直にSVGタグに直接「onClick=””」を書くのが簡単かつ確実な気がしてきました。
コメント