javascript - jQuery UI 小部件工厂 _on 事件返回意外事件目标

Question

我在理解 jQuery Ui Widget 工厂的事件处理时遇到了一些问题。

看这个截图:

$(function () {

    $.widget("custom.superduper", {
        _create: function () {
            this._on($(this.element, "a"), {
                click: function (event) {
                    console.log($(event.target));
                }
            });
        }
    });

    $("#gallery").superduper();
});

在此 HTML 上运行:

<ul id="gallery">
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li>
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li>
    <li><a href="#"><img src="http://www.placehold.it/50x50" /></a></li>
</ul>

工作演示:http://jsfiddle.net/ech2htrt/2/

当您单击图库中的图像时，控制台输出为:

Object[img 50x50]

我预计它是 <a>画廊内的元素。我当然可以使用 closest()或parent()获得所需的元素，但这感觉很不自然。我在事件处理程序的定义中哪里出错了？

有没有更好的方法获取事件触发元素？当我使用this时或$(this)引用始终是小部件元素。

Answer 1

据我了解，this._on($(this.element, "a"), {....这里你想在 anchor 标记上附加点击事件，上下文应该是 this.element 。如果是这样，那么参数就放错了位置。正确的顺序是-

this._on($("a" , this.element), {

通过这样做，如果我调试并查看事件对象，我可以看到 event.currentTarget 是一个而 event.delegatetarget 也是一个。但由于 img 标签位于 anchor 标签(z-index)上方，因此 event.target 是 img。

如果我增加 anchor 标记的高度和宽度，允许我在 img 标记周围单击它，我会得到所需的结果。