根据事件有条件地阻止事件删除

Conditionally prevent event removal depending on the event

本文关键字：事件 删除 有条件      更新时间：2023-11-02

我有一个有趣的情况。我有多个单击事件附加到一个元素。

在事件1之后，我需要删除事件2，但保留事件1。

这是我所拥有的：

$('.square').on('click', grow);
$('.square').on('click', nameReset);
var nameReset = function () {
    alert(this.className);
}
var grow = function () {
    $(this).toggleClass('grow');
    $(this).off('click');
}

换句话说，我需要保留grow函数，但在事件触发后删除nameReset。

.square {
    height: 100px;
    width: 100px;
    border: 1px solid;
    display :inline-block;
    transition: all 2s;
}
.grow {
    width: 150px;
    height: 150px;
}
.red { background-color: red; }
.blue { background-color: blue; }

两个选项：

  • 删除事件时指定函数（即$(this).off('click', nameReset)）。

    此处示例

    jQuery .off()

    可以通过在处理程序参数中指定函数名来删除处理程序。当jQuery附加一个事件处理程序时，它会为处理程序函数分配一个唯一的id。

    var nameReset = function () {
    alert(this.className);
}
var grow = function () {
    $(this).toggleClass('grow');
    $(this).off('click', nameReset);
}
$('.square').on('click', grow);
$('.square').on('click', nameReset);

  • 或者，您可以将事件命名为（$(this).off('click.square.nameReset')），以便删除所需的事件：

    此处示例

    var nameReset = function () {
    alert(this.className);
}
var grow = function () {
    $(this).toggleClass('grow');
    $(this).off('click.square.nameReset');
}
$('.square').on('click.square.grow', grow);
$('.square').on('click.square.nameReset', nameReset);
相关文章：