Javascript 单击事件侦听器仅触发一次

Question

我有一个 Chrome 扩展程序，可以在推文发布之前拦截并检查它们。 为此，我向Tweet按钮添加了一个事件侦听器。 由于内容是动态的，我使用此线程中提出的解决方案：

initialize : function() {
    let that = this;
    let jsInitChecktimer = setInterval(checkForJsFinished, 111);
    function checkForJsFinished () {
        if (document.querySelector("div[data-testid='tweetButtonInline']")) {          
            clearInterval (jsInitChecktimer);
            console.log("Button found");
            that.addSubmitNewTweetClickHandler();
        }
    }
},

addSubmitNewTweetClickHandler : function() {
    let that = this;
    let buttonSubmitTweet = document.querySelector("div[data-testid='tweetButtonInline']");
    buttonSubmitTweet.addEventListener('click', function(e) {
        console.log("CLICK");
        // Stop default event from happening
        e.preventDefault();
        e.stopImmediatePropagation();
        // Do stuff
    });
},

如果推文通过了检查，它会通过使用.trigger('click')以编程方式触发事件来提交。

这工作正常，但只有一次。 鸣叫已经提交并公布后，对事件侦听Tweet按钮消失了，我不能拦截下一条推文进行检查。 我已经尝试在再次提交后调用initialize() - 也许按钮被删除并新添加到 DOM （它实际上在提交推文时消失了一会儿） - 但querySelector立即找到了按钮。 但即使在再次调用initialize()之后，也不会触发Tweet按钮。

这里可能是什么问题？ 我的问题是我什至不知道在哪里寻找以及如何调试它。

Answer 1

几个小时后，我终于弄明白了。 问题本质上是新 Twitter 网站的高度动态内容。 提交鸣叫后， Tweet按钮被确实移走后又重新加入。 在需要做一个严重的变化：

• 使用MutationObserver来跟踪任何更改。 每次有变化时，调用initialize()函数。 为避免调用过多，我会在发生某些更改时执行此操作（此处为不必要的详细信息）

• 更改addSubmitNewTweetClickHandler()方法，以便首先删除事件侦听器以避免重复的侦听器（请注意，我使用对象，因此与我的原始问题相比使用了this ）

   addSubmitNewTweetClickHandler : function() { let that = this; let buttonSubmitTweet = document.querySelector("div[data-testid='tweetButtonInline']"); buttonSubmitTweet.removeEventListener('click', this.handleSubmitNewTweetClick ); this.handleSubmitNewTweetClick = this.handleSubmitNewTweetClick.bind(this) buttonSubmitTweet.addEventListener('click', this.handleSubmitNewTweetClick ); },

  此更改需要创建参考函数handleSubmitNewTweetClick

总的来说，它仍然不是一个完美的解决方案，因为我调用了initialize()很多不必要的时间。 但是，我无法可靠地确定何时将Tweet按钮添加到文档中。 当我使用MutationObserver ，所有添加的节点都没有我需要识别正确按钮的属性data-testid 。 我知道为什么这个属性不存在。 也许该属性在添加到按钮后会添加几次，但即使使用额外的MutationObserver寻找属性更改，我也可以检测到这一点。

无论如何，它现在可以工作，并且仅适用于原型。