jQuery 3.x .on() 之后的 .off()

Question

我只是在 .click() 方法的 .on() 方法之后使用了 .off() 方法。
我真的很困惑为什么会触发 click() 事件！

$('span').on('click', function () { $('p').text("You Clicked!") });

$('span').off('click', function () { 
  $('p').text("Ha Ha Ha!") });

span{
  background-color:#ac0;
  padding:5px;
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<span>Click Me!</span>
<p>*****</p>

Answer 1

您正在尝试删除一个不同于 的处理程序函数，而不是最初分配的。

相反，创建对该函数的引用，并通过该引用 add/remove 它：

var clickHandler = function () { $('p').text("You Clicked!") };

$('span').on('click', clickHandler);
$('span').off('click', clickHandler);

Answer 2

您误解了 off() 方法末尾的函数的用途。它不是回调，它是事件处理程序。

该函数应该与您最初设置的事件处理函数相同。这样做是为了让您可以删除单个点击处理程序。

function handlerA(e) {
  console.log('heard by A');
}

function handlerB(e) {
  console.log('heard by B');
}

// add both handlers to click events
$('span').on('click', handlerA);
$('span').on('click', handlerB);

// remove the first click event only, leaving the second
$('span').off('click', handlerA);

以上只会在点击时记录 heard by B。

要删除所有点击处理程序，您需要完全省略该函数。

$('span').off('click');

jQuery 3.x .on() 之后的 .off()

jQuery 3.x .off() after .on()

javascript

jquery

jquery-3