即使双击也只调用一次事件处理程序

Question

首先，一旦我的事件被触发，我不想使用removeEventListener。因为，每当用户点击元素时，我都需要触发它。

我看过类似的问题。这不是重复，让我解释一下：

我有一个收藏夹按钮，点击后会显示我之前收藏过的项目列表。有用。但是当我双击时，由于某种原因，它最终会调用该函数两次。

这是反对意见的代码：

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('favButton').addEventListener('click', function(event) {
    $('#favorites').show(); // shows the bookmarks div element
    $('#front').hide(); // hides the homepage and irrelevant details to current search
    addFavorites(); // populates the bookmarks
  });
});

和addFavorites()：

function addFavorites()
{
    $('#favorites').empty();
    // code to populate bookmarks
}

每次单击收藏夹而不重新加载时，我都需要它才能工作。我需要它来停止填充收藏夹两次，如果我双击（单击，它只填充一次）。

图片中的问题：

观察到一些奇怪的事情：使用相同的代码，问题不会出现在Linux上的Chrome 64位版本上，而是出现在Windows上的Chrome 32位版本（相同的版本号）上。 / p>

了解解决此问题的任何方向。感谢。

Answer 1

您可以尝试以下操作。

document.getElementById('favButton').addEventListener('click', function(event){
    //if it has already been clicked, return and don't repeat
    if (this.getAttribute('data-clicked') == 'true') return;
    //marked it as already clicked
    this.setAttribute('data-clicked', true);

    $('#favorites').show(); // shows the bookmarks div element
    $('#front').hide(); // hides the homepage and irrelevant details to current search

    //if you need this to work multiple times you can make the method
    //return a promise (I assume you are doing some ajax) that will
    //resolve when the request is done
    var promise = addFavorites(); // populates the bookmarks

    //we can undo the attribute when it finishes so the logic will repeat
    var thiz = this;
    promise.always(function(){
        thiz.setAttribute('data-clicked', false);
    });
});