在GopherJS中如何正确替代JavaScript的$(this)获取绑定元素？

最近我在把一个单页应用从JavaScript转成GopherJS，碰到了个小坑：在处理列表项的点击事件时，没法像JS里那样用$(this)拿到绑定事件的<li>元素。

先给大家看看原JavaScript代码：

var list = $('.all-products .products-list'); 
list.find('li').on('click', function (e) { 
    e.preventDefault(); 
    var productIndex = $(this).data('index'); 
    window.location.hash = 'product/' + productIndex; 
})

我自己写的GopherJS代码是这样的：

list := jquery.NewJQuery(".all-products .products-list") 
list.Find("li").On("click", func(e jquery.Event) { 
    e.PreventDefault() 
    // productIndex := jquery.NewJQuery(e.Target).Data("index").(float64) 
    // dom.GetWindow().Location().Hash = "product/" + productIndex 
})

问题出在注释掉的那一行：用jquery.NewJQuery(e.Target)拿到的不是绑定事件的<li>，而是<li>内部的<div>元素。后来我想明白了，JS里事件回调的this其实对应的是事件绑定的元素，也就是event.currentTarget，而event.target只是实际触发事件的子元素（这里就是内部的div）。

那在GopherJS里怎么解决呢？很简单，把e.Target换成e.CurrentTarget就可以了！因为CurrentTarget始终指向绑定了事件处理函数的那个DOM元素，和JS里的this行为完全一致。

修改后的完整代码如下（记得导入strconv包来把float64转成字符串）：

import (
    "github.com/gopherjs/gopherjs/js"
    "github.com/gopherjs/jquery"
    "strconv"
)

// ...

list := jquery.NewJQuery(".all-products .products-list")
list.Find("li").On("click", func(e jquery.Event) {
    e.PreventDefault()
    // 用CurrentTarget拿到绑定事件的li元素
    productIndex := jquery.NewJQuery(e.CurrentTarget).Data("index").(float64)
    // 把float64转成字符串再拼接
    js.Global.Get("window").Get("location").Set("hash", "product/" + strconv.FormatFloat(productIndex, 'f', 0, 64))
})

这样就能完美模拟JS里$(this)的效果啦，不管点击的是<li>内部的哪个子元素，都能正确获取到对应的index值。

内容的提问来源于stack exchange，提问作者Ralph