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

debugcn 发表于 Dev

乔治

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

在事件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; }

乔什·克罗泽（Josh Crozier）

两种选择：

删除事件时，请指定功能（即$(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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。