使用ES6调整jQuery单击处理程序

Question

我在过去5年中以相同的方式写下了点击处理程序。

$('.some-link').on('click', function(event) {
    event.preventDefault();
    $(this).addClass('active');
});

我喜欢新的ES6箭头语法，但是我不知道如何使jQuery的工作方式相同。例如，以上不像以上那样工作：

$('.some-link').on('click', (event) => {
    event.preventDefault();
    $(this).addClass('active');
});

是否有人使用其jQuery活动处理程序进行了切换？

Answer 1

箭头功能不仅是常规功能的句法糖。有一个区别 - 他们没有自己的上下文作为常规功能，因此不能这样使用。

在引擎盖下，jQuery用event.target绑定处理程序功能(意味着处理程序内部的this为event.target(。但是，当您使用箭头函数时，就没有创建函数上下文 - 有关此此处的更多信息，请在MDN：https：//developer.mozilla.org/cs/docs/web/web/javascript/reference/reference/functions/arrow_functions/arrow_functions#no_binding_binding_of_thisting/P>

您可以做这样的事情：

$('.some-link').on('click', event => {
    $(event.target).addClass('active');
    return false; // this is same as calling `event.preventDefault();` in jquery
});