Question

如何控制仅触发一次事件？

实际上，一个快速的谷歌似乎暗示了.one帮助的事实..

Answer 1

如果您不需要支持Internet Explorer，请使用once：

element.addEventListener(event, func, { once: true });

否则请使用：

function addEventListenerOnce(target, type, listener, addOptions, removeOptions) {
    target.addEventListener(type, function fn(event) {
        target.removeEventListener(type, fn, removeOptions);
        listener.apply(this, arguments);
    }, addOptions);
}

addEventListenerOnce(document.getElementById("myelement"), "click", function (event) {
    alert("You'll only see this once!");
});

Answer 2

您可以使用jQuery的one method，它只会订阅第一次出现的事件。
例如：

$('something').one('click', function(e) {
    alert('You will only see this once.');
});

Answer 3

与rofrol的答案相同，只是另一种形式：

    function addEventListenerOnce(element, event, fn) {
        var func = function () {
            element.removeEventListener(event, func);
            fn();
        };
        element.addEventListener(event, func);
    }

Answer 4

在addEventListener方法调用中使用正确的选项：

element.addEventListener(event, func, { once: true })

Answer 5

rofrol的anwser略有改进版本：

function addEventListenerOnce(target, type, listener) {
    target.addEventListener(type, function fn() {
        target.removeEventListener(type, fn);
        listener.apply(this, arguments);
    });
}

通过使用apply，传递所有参数，this按预期工作。

Answer 6

此外，您可以这样做：

window.addEventListener("click", function handleClick(e) {
    window.removeEventListener("click", handleClick);

    // ...
});

Answer 7

添加了添加/删除事件侦听器的选项：

function addEventListenerOnce(target, type, listener, optionsOrUseCaptureForAdd, optionsOrUseCaptureForRemove) {
    const f = event => {
        target.removeEventListener(type, f, optionsOrUseCaptureForRemove);
        listener(event);
    }
    target.addEventListener(type, f, optionsOrUseCaptureForAdd);
}

只开一次活动？

7 个答案: