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

Question

我只是在 .on() 方法之后将 .off() 方法用于 .click() 方法。
我真的很困惑为什么 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

您正在尝试删除与最初分配不同的处理函数。

相反，创建对该函数的引用并通过该引用添加/删除它：

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');