使用现代JavaScript！

Question

我想在函数中添加一个click事件监听器，但只希望它发生一次。我怎么能这样做？

如果有可能的话，我想清楚JQuery。

EDITED

因为我得到的答案完全满足了我的需要，但我可以用上下文更清楚。

我正在编写一个绘制矩形的函数，首先只需单击一个按钮即可启动矩形函数。然后在drawRectangle函数中有两个单击事件侦听器。这些是我想在函数中只发生一次的事件。如果用户再次单击矩形启动按钮，则允许用户创建另一个矩形。

Answer 1

使用现代JavaScript！

EventTarget.addEventListener("click", function() {

    // Do something cool

}, {once : true});

一个布尔值，指示在添加后最多应调用一次侦听器。如果true，则在调用时将自动删除侦听器。

- MDN web docs

此处有list of browsers支持此功能（截至2019年5月为90％）

Other reference

Answer 2

一旦触发事件，您必须使用removeEventListener。但是，removeEventListener将一个函数作为参数，这意味着您需要声明一个命名函数，将其与addEventListener一起添加，并让它自行删除。例如：

function foo() {
    // do things, then
    removeEventListener('click', foo);
}

addEventListener('click', foo);

Answer 3

function one(el, type, fn) {
    function handler(event) {
        el.removeEventListener(type, handler);
        fn(event);
    }
    el.addEventListener(type, handler);
}

// use it like
one(window, 'resize', function () {
    alert("This triggers just once");
});

示例：http://jsfiddle.net/6njpem7x/

Answer 4

addEventListener和removeEventListener的组合：

element.addEventListener("click", clickFunction);
function clickFunction(e) {
    console.log("clicked");
    element.removeEventListener("click", clickFunction);
}

jsFiddle

Answer 5

类似这样的事情

var el = document.getElementById('something');
el.addEventListener('click', doSomething);

function doSomething() {
  el.removeEventListener('click', doSomething);

  //code
}

Answer 6

其他答案是正确的，因为可以使用命名函数来实现，但是您无需单独声明该函数。您可以使用命名函数表达式：

element.addEventListener("click", function handler(event) {
  this.removeEventListener("click", handler);
  // ...
});

一种替代方法（虽然不是最优方法）是保留一个变量，该变量跟踪处理程序是否已执行：

var wasExecuted = false;
element.addEventListener("click", function(event) {
  if (wasExecuted) {
    return;
  }
  wasExecuted = true;
  // ...
});

该变量需要在处理程序外部但在范围内声明，这样它的值才能在事件触发器之间持续存在。

Answer 7

您可以在通用事件处理程序内部使用e.target.removeEventListener(e.type, arguments.callee)
或者，您可以使用特殊功能来创建“一次性”事件侦听器：

function oneTimeListener(node, type, callback) {
    // create event
    node.addEventListener(type, function(e) {
        // remove event listener
        e.target.removeEventListener(e.type, arguments.callee);
        // call handler with original context 
        // as it happens with native addEventListener
        return callback.call(this, e); 
    });
}

oneTimeListener(document.getElementById("myElement"), "click", myHandler);

Answer 8

我正在使用的另一个简单解决方案是向我们正在侦听的元素添加一个虚拟类，以便它不会再次触发。

const myButton = document.querySelector('#my-button:not(.init)');
myButton.addEventListener('click', (e) => {
     e.preventDefault();
     myButton.classList.add('init');
  });

Answer 9

您可以在首次点击后设置Cookie：

document.cookie="click=1; expires=.......";

并向监听器添加条件 - 如果设置了cookie，则省略该条件。

如何为一次性单击功能添加事件？

9 个答案:

使用现代JavaScript！