2

これはおそらくjavascript 101ですが、これに対する解決策がわかりません。次のフィドルを検討してください

私のjsは、クラスを使用してタグにクリックイベントを設定します.show-modal

それでも、私のコンソール ログは、イベント ターゲットが実際には img タグであったことを示しています。さまざまな理由から、イベント ターゲットを a タグにする必要があります。

これについて、私にとって課題となる 2 つの点があります。

  1. イベントターゲットを a タグにすることに成功した唯一の方法は、img タグをその外側で分離し (つまり、もう子ではなく a タグの兄弟にする)、a タグの位置を設定することです。 :絶対、寸法と画像上の位置を指定します。このアプローチは最も望ましくないと思いますが、他にどうすれば目標を達成できますか?

  2. 私を本当に混乱させているのは、クリックイベントを添付した要素とイベントターゲットがどのように異なるのでしょうか? それらは同じであるべきではありませんか？それらが同じである必要がある場合、クリックイベントを受け取る要素がクリックイベントをアタッチしたものではない場合、どのように関数を呼び出すことができますか?

4

4 に答える 4

7

使用する

e.currentTarget-- イベントがバインドされる要素を指定します。（これも使えます ）

e.target -- イベントをトリガーした要素を示します。

フィドルをチェック

ここでの問題は、画像がほぼ完全にアンカーを占めることです。したがって、anchorタグは決してe.target..

高さが異なる例を確認してください。

フィドルをチェック

于 2013-08-02T07:39:11.753 に答える
3

イベント ターゲットは、イベントをトリガーした要素であり、必ずしもハンドラーがアタッチされている要素ではありません。

画像をクリックすると、イベントが DOM ツリーに伝播しclick、anchor.

が必要な場合はanchor、 を使用できますthis。

于 2013-08-02T07:39:34.573 に答える
1

thisターゲットの代わりに使用できます: DEMO

$(document).ready(function(){
    $('.show-modal').on('click',function(e){
        console.log(this);
    });
});
于 2013-08-02T07:39:01.210 に答える
1

イベントはimgタグでトリガーされますが、リスナーのコンテキストはクラスのタグであるshow-modalため、コールバック コンテキストはリスナーがアタッチされた場所になります。

$('.show-modal').on('click', function(e)
{
    console.log(e.target);
    console.log($(this));//the .show-modal tag
});

それで全部です。イベントを委譲していて、クリックされた要素が ID x またはクラス Y を持つ要素の子であるかどうかを確認したい場合は、次のようにします。

$(document).on('click','img',function(e)
{//this catches all clicks on all imgs in your page
    console($(this) === $(document));//true
    console.log(e.target);//img tag
    if ($(e.target).closest('.show-modal'))
    {
        console.log('yes, clicked image is child of .show-modal element'):
    }
});
于 2013-08-02T07:39:38.920 に答える