Question

我在函数中有一个事件监听器，每次调用该函数时，事件监听器都会不断附加，并且事件监听器中的代码会被多次触发，具体取决于调用函数的次数。我该如何解决这个问题？

function myFunction() {
    $("#element").on("click", function() {
        alert("test");
    }
}

$("body").on("click", function() {
    myFunction();
});

每次调用myFunction（）时都会添加一个额外的单击事件侦听器，因此如果单击该主体5次，则单击“#element”。尽管只点击一次，警报消息将运行5次。

Answer 1

通常，addEventListener不会将事件侦听器附加到事件侦听器列表中，如果该列表中已存在具有相同类型，回调和捕获的事件侦听器。

但问题是，每次调用myFunction时都会重新创建一个新的（不同的）回调。为避免这种情况，您应将回调存储在myFunction之外的变量中。

但即使你这样做，jQuery仍会多次调用回调。所以只需使用vanilla-js：

function callback() {
  alert("test");
}
function myFunction() {
  document.querySelector("#element").addEventListener("click", callback);
}

＆＃13;

function callback() {
  alert("test");
}
function myFunction() {
  document.querySelector("#element").addEventListener("click", callback);
}
$("body").on("click", myFunction);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Some content — click me first.
<div id="element">Element — then click me</div>

＆＃13;

Answer 2

如果您必须这样做，请使用class Test(object): def __init__(self, a, b, *args, **kwargs): autoassign(locals())然后使用off以确保它不会连接多次。为确保您不删除任何其他人的处理程序，请为该事件添加自定义命名空间（例如，下面的on）：

.mycustom

自定义命名空间对事件没有影响，但请确保您稍后可以使用function myFunction() { $("#element").off('click.mycustom').on("click.mycustom", function() { alert("test"); } }访问该特定版本的click。

在函数中存储事件侦听器并调用该函数

2 个答案: