如果功能多次激活，请多次停止输出打印

Stop output printing multiple times if function activated more than once

本文关键字：输出 打印 功能 激活 如果      更新时间：2023-09-26

我正在使用Jquery onclick按钮激活一个javascript函数：

$('#on').click(function() {
var a = document.getElementsByTagName('a');
for (i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    var span = document.createElement('span');
    var text = document.createTextNode(this.innerHTML + " ");
    span.appendChild(text);
    document.getElementsByClassName('output')[0].appendChild(span);
  })
}
    });

问题是，如果多次单击按钮，该功能将重复多次。在这种情况下，它将多次打印输出。如何将 javascript 函数修改为每次单击仅打印一个字符？

例：http://jsfiddle.net/874Ljaq1/

使用 jQuery 事件绑定方法one 

$('#on').one("click", function() {
    var a = document.getElementsByTagName('a');
    for (i = 0; i < a.length; i++) {
        a[i].addEventListener('click', function() {
            var span = document.createElement('span');
            var text = document.createTextNode(this.innerHTML + " ");
            span.appendChild(text);
            document.getElementsByClassName('output')[0].appendChild(span);
        })
   }
});

您可以使用 jQuery .data() 函数在单击按钮一次时设置标志，并且仅在未设置标志时才继续。

代码：

$('#on').click(function () {
    // if we have a flag that indicates this button has been clicked before,
    // don't do anything.
    if ($(this).data('clicked')) 
        return;
    $(this).data('clicked', true); // set the flag
    var a = document.getElementsByTagName('a');
    for (i = 0; i < a.length; i++) {
        a[i].addEventListener('click', function () {
            var span = document.createElement('span');
            var text = document.createTextNode(this.innerHTML + " ");
            span.appendChild(text);
            document.getElementsByClassName('output')[0].appendChild(span);
        })
    }
});
相关文章：