Question

在过去的5年里，我一直在用jQuery编写点击处理程序。

$('.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/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this

你可以这样做：

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

使用ES6调整jQuery Click Handler

1 个答案: