0

jQuery Ui ウィジェット ファクトリのイベント処理を理解するのに少し問題があります。

この抜粋を参照してください：

$(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)参照は常にウィジェット要素です。

4

2 に答える 2

1

セレクターはaですが、imgはイベント（イベントのソース）を作成するものであり、バインド先のaにバブルアップするため、aの代わりにimgを取得しています。したがって、event.target は a ではなく img になります。a 内に img がない場合、event.target は a になります。また、ハンドラーでは、イベントがハンドラーに到達する前の最終的な宛先であるため、これはウィジェットを参照します。あなたにはオプションがないと思いますが、closest() を使用します。

jquery cookbookを参照し、8.8 までスクロールします。

于 2014-09-23T14:14:46.813 に答える