javascript - 即使双击时也仅调用事件处理程序一次

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 位版本(尽管版本号相同)上。

感谢任何解决此问题的指示。谢谢。

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