javascript - 如何在 Javascript 中只执行一次事件处理程序？

Question

我正在创建允许进入帖子部分的按钮。我正在检查主体是否有“登录”类。如果测试为 false，我想为消息“您必须登录”创建 div 容器并将其附加到我的部分。 我的问题:每次我单击此按钮时，都会附加新节点。 - 如何仅调用一次处理程序？

if( !isOnline ) {
    e.preventDefault();

    var divForLog = document.createElement('div'),
        linkElement = document.createElement('a');

    linkElement.setAttribute('href', 'http://domain/login');
    linkElement.text = "log in"

    divForLog.innerHTML = "You have to ";
    divForLog.appendChild(linkElement);

    document.getElementById('last_questions').appendChild(divForLog);
}

Answer 1

有几种潜在的解决方案，但我在这里只列出几个。

“全局”

在创建处理程序的范围内创建变量var loginShown。然后，更改! isOnline 检查!在线 ＆＆ !在 if 语句中添加 loginShown，并在附加 div 后设置 loginShown = true。

摆弄 DOM

根据#last_questions的其他内容，您可以简单地测试登录元素是否已附加:

if ( ! document.getElementById('last_questions').querySelector('div > a[href="http://domain/login"]' ) ) {
    ...
}

如果做不到这一点，您可以按照注释中提到的 @NewToJS 操作，并向父级添加一个属性(附加 div 后)，您可以测试该属性，例如 ID 或 data- 属性。

解除事件绑定(bind)

如果您使用 jQuery，则更容易，正如 @Pawel 提到的，一旦附加了 div，您就可以简单地取消绑定(bind)事件。可能是最干净的解决方案，但实现起来也比较棘手。它还取决于处理程序正在做什么。