20

SVG キャンバスに追加するすべての要素に共通のクリック ハンドラーを使用しようとしています。しかし、ハンドラーを新しく作成された要素に委任することはできません。

これは私が委任しようとしたコードですが、うまくいきません

$("#floor").on('click','.drawnLine', function() {
    //#floor is the SVG Element
    //.drawnLine is the <line> element that is added dynamically
    console.log($(this).data('index'));
});

更新： jQueryのマニュアルに.on()は、

注:委任されたイベントは SVG では機能しません。

では、この問題に対する他の回避策はありますか?

4

2 に答える 2

13

jQuery が SVG で失敗した場合、vanilla js を使用できます。幸いなことに、svg をサポートするすべてのブラウザーは、イベント リスナーもサポートしています。純粋な js 委任イベントはそれほど見苦しくありません。

$("#floor")[0].addEventListener('click', function(e) {
  // do nothing if the target does not have the class drawnLine
  if (!e.target.classList.contains("drawnLine")) return;
  console.log($(this).data('index'));
});

ただし、独自の関数を作成して、イベントをより明確に委任することもできます。

于 2013-01-21T14:37:33.940 に答える
9

TL/DR: イベント リスナーを SVG 以外の親要素にアタッチします。

jQuery docs の注記は、やや誤解を招く可能性があります。

委任されたイベントは SVG では機能しません。

それはおそらく...

リスナーがSVGにアタッチされている場合、委任されたイベントは機能しません。

イベント リスナーが SVG 要素にアタッチされている場合、jQuery のイベント委任は機能しません。ただし、代わりにリスナーを SVG の SVG 以外の親にアタッチすると、イベントの伝播は期待どおりに機能し、SVG 要素に一致するセレクターは実際にイベント ハンドラー関数をトリガーします。

リスナーを SVG 要素にアタッチしても機能しません。

$("#floor").on('click','.drawnLine', function() {
    console.log($(this).data('index'));
});

ただし、親要素にアタッチすると機能します。

$(document.body).on('click','#floor .drawnLine', function() {
    console.log($(this).data('index'));
});

注: 私が気付いた 1 つの癖は、イベント ターゲットが SVG 要素である場合、イベントがdocument.bodyiOS までバブルアップしないことです。したがって、iOS ユーザーがハンドラー関数をトリガーできるようにする場合は、イベント リスナーをその間の要素 ( divSVG が存在する要素など) にアタッチする必要があります。

于 2015-03-17T14:35:16.813 に答える