EventListener click関数は、無限スクロール中に再び初期化した後に複数回発生します。

Question

これは私の最初の質問ですので、できるだけ正確に記述し、「どうやってよい質問をしますか？

私の問題：WordPressのサイト上での次の記事をロードするために、「古いけど金」infinite-scroll jQueryプラグインを使用して

イム。また、lazyframeプラグインを使用して、動画の再生ボタンをクリックしてYouTube動画を「怠け者」に読み込むこともできます。

//infinite scroll 
    if ($masonry.length && obj_testsite.infinitescroll != 'disable') { 
    nextSelector = obj_testsite.nextselector; 
    if (document.URL.indexOf('/source/') != -1) { 
     nextSelector = '#navigation #navigation-next a'; 
    } 

    $masonry.infinitescroll({ 
     navSelector : '#navigation', 
     nextSelector : nextSelector, 
     itemSelector : '.thumb', 
     prefill: true, 
     bufferPx : 500, 
     loading: { 
      msgText: '', // load spinner icon instead of gif images - see below 
      finishedMsg: obj_testsite.__allitemsloaded, 
      img: '', 
      finished: function() {} 
     } 
    }, function(newElements) { 

      lazyframe('.lazyframe'); 

      var $newElems = $(newElements); 
      $('#infscr-loading').fadeOut('normal'); 
      $masonry.masonry('appended', $newElems, true);         
    }); 
} 

：イムは無限スクロールJSのfunction(newElements)一部にlazyframe('.lazyframe');初期化コードを追加すると、次のようにlazyframeを初期化し、infinteのスクロール機能で新しい投稿のセットをロードした後lazyframe機能を確保するために、これまでのところ、これは正常に動作します。しかし、私はスクロールダウンし、無限スクロールでいくつかのセットの記事を読み込んで、再生ボタンをクリックすると、時々lazyframeプラグインが複数のyoutube iframeを作成します。

これまでの私の研究では、イベントが複数回発生している理由は、イベントが要素に複数回アタッチされているためです。次のコードlazyframeプラグインは、文書内の要素をターゲットにするのaddEventListener関数を使用して一部を示しています

  function n(e) { 
      if (e instanceof HTMLElement != !1) { 
       var t = { 
        el: e, 
        settings: i(e) 
       }; 
       t.el.addEventListener("click", function() { 
        return t.el.appendChild(t.iframe) 
       }), d.videolazyload ? l(t) : s(t, !!t.settings.thumbnail) 
      } 
     } 

この問題を解決するためにどのように任意のアイデア？私はイベントの伝播を止めようとしましたが、知識の不足のために修正できませんでした。どんな助けもありがとう。

Answer 1

ここにプラグインの著者があります。それを使ってくれてありがとう！

プラグインに、再初期化時に要素/要素に複数のイベントリスナーを付けるバグがありました。これはv1.1.1でソートされているので、プラグインを更新すればうまくいくはずです。

Answer 2

eventListenerでイベントキャプチャを使用します。実際には、すべてのブラウザがイベントキャプチャをサポートしているわけではありません（たとえば、Internet Explorerのバージョンが9未満ではありません）が、すべてがイベントのバブリングをサポートしているため、ブラウザ間のすべての抽象化でイベントにハンドラをバインドするフェーズ含まれています。

jQueryで探しているものに最も近いものがon（）を使用しています。 だから、この（イベント）にコードを変更することができます：あなたはこのソリューションを試すことができますので、あなたが指定した要素の上に（我々の場合には「クリック」）イベントリスナーを削除

$(t.el).off('click').on('click', function() { 
        return t.el.appendChild(t.iframe) 
       }); 

オフ（）関数。