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指向您的班级实例。）

也就是说，事件参数的属性没有关系。无论函数上下文如何，它都按原样传递。

你的＆＃34;解决方法＆＃34;有两部分：使用function语句，并通过$(this)检索绑定元素。后者实际上是处理问题的正确方法，前者允许您引用函数内的两个上下文。

这是一个非常有效的解决方案，我说要配合使用它，并且不要试图强制使用箭头功能的解决方案。

jQuery点击事件与胖箭头功能

1 个答案: