如何在函数中添加一次单击事件

How can I add an event for a one time click to a function?

本文关键字：一次 单击 事件 函数 添加      更新时间：2024-02-03

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

如果可能的话，我也希望避开JQuery。

编辑

由于我得到的答案完全满足了我的需求，我想我可以在上下文中更清楚地说明这一点。

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

使用现代JavaScript

EventTarget.addEventListener("click", function() {
    // Do something cool
}, {once : true});

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

-MDN web文档

所有现代浏览器都支持此功能

其他参考

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

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

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/

其他答案是正确的，因为这可以通过命名函数实现，但不需要单独声明函数。您可以使用命名函数表达式:

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

另一种虽然不太理想的方法是保留一个跟踪处理程序是否执行的变量：

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

需要在处理程序之外但在范围内声明变量，以便其值在事件触发器之间保持不变。

addEventListener和removeEventListener的组合：

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

jsFiddle

类似这个的东西

var el = document.getElementById('something');
el.addEventListener('click', doSomething);
function doSomething() {
  el.removeEventListener('click', doSomething);
  //code
}

在事件处理程序中，您可以使用通用的：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);

您可以在第一次点击后设置cookie：

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

并将条件添加到侦听器中——如果设置了cookie，则忽略该条件。

我正在使用的另一个简单解决方案是向我们正在侦听的元素添加一个伪类，这样它就不会再次激发。

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