調整jQuery點擊與ES6的處理程序

Question

我一直在用jQuery編寫我的點擊處理程序與過去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/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 
});