带胖箭头功能的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)检索绑定元素。后者实际上是处理您的问题的正确方法，前者允许您在函数内引用这两个上下文。

它是一个完全有效的解决方案，我说它随它去，并不要试图强制箭头功能的解决方案，他们不适合。