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

How to execute event handler only once in Javascript?

本文关键字：一次 程序 事件处理 执行 Javascript      更新时间：2023-09-26

我正在创建一个按钮，它允许进入帖子部分。我正在检查主体是否有类"已登录"。如果test为false，我想为消息"Youhavelogi-in"创建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);
}

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

"全局"

在创建处理程序的作用域中创建一个变量var loginShown。然后，在if语句中将! isOnline检查更改为! isOnline && ! loginShown，并在附加div后设置loginShown = true

篡改DOM

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

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

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

取消绑定事件

如果您使用的是jQuery，那么就更容易了，正如@Pawel所提到的，您可以在添加div后简单地解除事件绑定。可能是最干净的解决方案，但实施起来也更棘手。它还取决于处理程序正在执行的其他操作。

尝试将属性id设置为您的div（在我的示例中为container），当用户click检查文档中是否已经存在具有id的元素时，如果不添加它：

if( !isOnline && document.getElementById('container').length==0) {
    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);
    divForLog.setAttribute('id', 'container'); //Add id attribute
    document.getElementById('last_questions').appendChild(divForLog);
}

希望这能有所帮助。

如果您正在使用jQuery，您可以做一些事情（从documentation.one|jQuery）。

$("#button" ).one( "click", function() {
      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);
    });

然而，我可以想到的另一种方法是使用jQuery的

$('#last_questions').html(divForLog);

更新

如果这不是一个选项（很可能，因为#last_questionsdiv可能包含其他内容），您可以创建一个<div id="log-in-alert"></div>，它将位于#last_questions中，并且只替换这个中的html

希望我能帮忙？？

相关文章：