ADDEventListener 点击函数在无限滚动期间再次初始化后多次触发

Question

这是我的第一个问题，所以我尽量准确地描述它并遵循 Whosebug 指南 "How do I ask a good question?"

我的问题：

我正在使用 "old but gold" infinite-scroll jQuery plugin to load the next posts on a wordpress site. Im also using the lazyframe 插件加载 youtube 视频 "lazy" 单击视频的播放按钮。为了在使用无限滚动功能加载一组新帖子后确保延迟框架功能，我通过以下方式初始化延迟框架，将 lazyframe('.lazyframe'); 初始化代码添加到无限滚动 js 的 function(newElements) 部分:

    //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);                                  
    });
}

到目前为止，一切正常。但是，当我向下滚动并使用无限滚动加载几组帖子然后单击播放按钮时，有时 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

您在 eventListener 中使用事件捕获。实际上，并非所有浏览器都支持事件捕获（例如，低于 9 的 Internet Explorer 版本不支持）但都支持事件冒泡，这就是为什么它是用于将处理程序绑定到所有 cross-browser 抽象中的事件的阶段, jQuery 包括在内。

最接近您在 jQuery 中查找的内容是使用 on()。因此，您可以将代码更改为此（事件）：

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

off() 函数删除您指定的元素上的事件侦听器（在我们的例子中为 'click'），因此您可以尝试此解决方案。

Answer 2

这里是插件作者。感谢您使用它！

插件中存在一个错误，会在重新初始化时在 element/elements 上附加多个事件侦听器。这是在 v1.1.1 中排序的，所以只需更新插件即可。

ADDEventListener 点击函数在无限滚动期间再次初始化后多次触发

EventListener click function firing multiple times after initialize again during infinite scroll

javascript

wordpress

jquery

infinite-scroll