帶胖箭頭功能的jQuery點擊事件

Question

用胖箭頭功能使用jQuery的點擊事件可能會令人困惑。 Event.target不是你所期望的。下面是代碼示例：

constructor() { 
    $("a.nav-link").click((e)=>{ 
     this.func($(e.target).data("target")); 
    }) 
} 

private func(target: string) { 
    console.log(target); 
} 

<a class="nav-link" data-target="search"><i class="fa fa-search"></i></a> 

有時候event.target是i元素 - 預計不會a標籤。

我有解決方法：

constructor() { 
    let _this = this; 
    $("a.nav-link").click(function (e) { 
     _this.func($(this).data("target")); 
    }) 
} 

有脂肪箭頭功能工作的解決方案？

Answer 1

你不能逃脫先執行 - 的箭頭函數語法的規定的功能之一是lexical binding of this，所以this是不是你所期望的在這裏，你重寫jQuery的處理函數this結合。
這很重要，而不是使用e.target你會更好與$(this)（但你將無法爲你的目的得到正確的this - 你需要this指向你的類實例）。

也就是說，與事件參數的屬性沒有關係。無論函數上下文如何，它都按原樣傳遞。

您的「解決方法」分爲兩部分：使用function語句，並通過$(this)檢索綁定元素。後者實際上是處理您的問題的正確方法，前者允許您在函數內引用這兩個上下文。

它是一個完全有效的解決方案，我說它隨它去，並不要試圖強制箭頭功能的解決方案，他們不適合。