0

我在理解 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()orparent()来获得想要的元素，但这感觉很不自然。我在事件处理程序的定义中哪里出错了？

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

4

2 回答 2

1

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

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

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

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

于 2014-09-23T14:25:12.993 回答
1

You're getting img instead of a because even though your selector is a, img is what creates the event (event's source) and it bubbles up to the a, which you bind to. So event.target will be the img, not a. If you didn't have an img inside your a, the event.target would be the a. Also in your handler this refers to the widget because that's the final destination of the event before it reaches your handler. I don't think you have an option but to use closest().

See jquery cookbook, scroll up to 8.8

于 2014-09-23T14:14:46.813 回答