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

【问题标题】：Adjusting jQuery Click Handlers with ES6使用 ES6 调整 jQuery 点击处理程序
【发布时间】：2017-04-17 01:45:01
【问题描述】：

在过去的 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 事件处理程序进行过切换吗？

【问题讨论】：

标签： jquery ecmascript-6

【解决方案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
});

【讨论】：