0

1つのイベントハンドラーでこれを行う方法があることを願っています。説明させてください：

私が何を扱っているのかという考えを無駄にすることなく複製するこの単純なhtmlスニペットを考えてみましょう。

<div class="navRow">
     <!-- 5 child divs in here -->
    <div id="box-bambin" class="yellow-box navbox">
    Content 1
    </div>

    <div id="box-mamiepom" class="green-box navbox">
    Content 2
    </div>

    <div id="box-amusailes" class="orange-box navbox">
    Content 3
    </div>

    <div id="box-fracomousse" class="red-box navbox">
    Content 4
    </div>

    <div id="box-pommeEnchantee" class="blue-box navbox">
        Content 5
    </div>

</div>

すべての内部divにイベントハンドラーを割り当てましたが、外部divに1つのイベントハンドラーを設定して、内部divのイベントをキャプチャできると確信しています。外側のdiv.navRowにイベントハンドラーを設定すると、マウスが外側のdivイベントをキャプチャします。

  $('.navRow', context).mouseover(function (event, domEle) {      

     var targetBox =  $(event); 

     console.log("captured event target = " + event.currentTarget);

        $('.navRow').each(function(){
            if($(this).attr('id') == $(event.target).attr('id')){
               // Found match do nothing.
              console.log("matched = " + $(this).attr('id'));
            } else{
              console.log("this = " + $(this).attr('class'));
              //* change for image.
            }
        });

  });

この時点で、私は単にマウスオーバーされた内部divを取得しようとしています。どうか、私は自分がしている悪い使い方についての批評/ヒントを非常に必要としています。私が試したことは、マウスオーバーされた内部要素#idを私に与えません。

.targetプロパティとcurrentTargetプロパティを試しましたが、適切な内部divオブジェクトIDが提供されません。

これを回避する方法はありますか、それともすべての内部オブジェクトをイベントハンドラーにバインドする必要がありますか？

  • 同様のコードが内部イベントハンドラーで適切に機能し、可能であれば1つのイベントハンドラーを使用してコードの動作を複製したかっただけです。

これがより大きなアプリケーションがどのように機能するかを考えていました。つまり、これらすべてのイベントハンドラーがないと、物事がいくらか単純化されるということです。

ありがとうSO。

4

4 に答える 4

4

次にon()、その「シングルハンダー」の親で（jQuery 1.7+）を使用siblings()し、ターゲットではない他のユーザーを取得します。

//"attach to .navRow an onmouseover for .navbox"
$('.navRow').on('mouseover','.navbox',function () {      

     //the target. "this" is the DOM element .navbox
     //to use jQuery on it, we wrap it in $();
     var target = $(this);

     //the siblings that are not the targets
     //since "target" is already a jQuery object
     //we can use siblings() on it to get its siblings
     var nonTargets = target.siblings(); 

});
于 2012-05-11T05:08:36.917 に答える
2

jQueryの新しい$.onメソッドを使用して、このように親にバインドする1つのイベントでこれを実現できます。

$('.navRow').on('mouseover','.navbox',function(){
   // now source object is this
   $source = $(this);
});
于 2012-05-11T05:08:03.280 に答える
1

クリックされた.navboxを探している場合は、

$('.navbox').each(function(){
于 2012-05-11T05:15:45.720 に答える
1

イベント委任を使用する別の方法は次のとおりです。

$('.navRow').mouseover(function (evt, domEle) {      
     evt = evt || event;
     var targetBox =  $(evt.target || evt.srcElement); 
     console.log("You hovered #" + targetBox.attr('id'));
});

このようにして、イベント開始要素（）を引き続き取得できますdiv.navrow。

これは、この方法と委任の方法の両方を示すjsfiddleです。.on

于 2012-05-11T05:41:55.627 に答える