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/

单击图库中的图像时，控制台输出为：

对象[img 50x50]

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

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

Answer 1

你正在获取img而不是a，因为即使你的选择器是a，img也是创建事件（事件的来源）的东西，它会冒泡到你绑定的a。所以event.target将是img，而不是。如果你的a中没有img，则event.target将是a。同样在你的处理程序中，这指的是小部件，因为它是事件到达你的处理程序之前的最终目的地。我不认为你有一个选择，但使用最近的（）。

请参阅jquery cookbook，向上滚动至8.8

Answer 2

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

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

通过这样做，如果我调试并查看事件对象，我可以看到event.currentTarget是一个而event.delegatetarget也是一个。但是作为锚标记（z-index）上面的img标记，event.target出来是img。

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

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

2 个答案: