3

すべて、ネストされた要素のホバーハンドラーを処理する問題に悩まされています。マウスが div に入るchildと、先祖も状態にあるようです。マウスが要素に入ると、祖先hoverのイベントをトリガーする方法はありますか?hoveroutchild

以下は、これまでに作成しようとしているものです。見直してください。

<style>
div
{
    border:1px solid red;
    margin:10px;
    padding:10px;
}
</style>


  <script>
      $(function() {
           $('div').each(function(){
             var current = this;
             $(this).hover(function(event){
                event.stopPropagation();// doesn't work.
                console.log('Capture for hover in ' + current.tagName + '#'+ current.id +
                    ' target is ' + event.target.id); },
               function(event){
                  event.stopPropagation();
                  console.log('Capture for hover out' + current.tagName + '#'+ current.id +
                    ' target is ' + event.target.id); });

                            });
                        });
 </script>

 <body id="greatgrandpa">                        
        <div id="grandpa">
               <div id="parent">
                  <div id="child"/>
               </div>
        </div>
 </body>
4

3 に答える 3

4

このメソッドは、とイベント.hover()の両方のハンドラーをバインドします。これを使用して、マウスが要素内にあるときに要素に動作を適用することができます。mouseentermouseleave

ただし、mouseoverandmouseoutイベントを使用する場合、これらのイベントは、マウスが要素とその子孫に出入りするときにトリガーされます。

例の別の試みについては、http：//jsfiddle.net/5yQY5/を参照してください。

于 2013-03-19T03:54:00.437 に答える
1

代わりに mouseover および mouseout イベントを使用してください

$(function() {
    $('div').on('mouseover', function(e){
        e.stopPropagation();
        $(this).addClass('my-bg');
    }).on('mouseout', function(e){
        $(this).removeClass('my-bg');
    })
});

デモ:フィドル

注: 各 div を反復処理してから、それぞれのイベント ハンドラーを追加する必要はありません。 を呼び出すだけで、すべての div のハンドラー$('div').hover(...)が登録されます。hover

于 2013-03-19T03:38:19.170 に答える
1

DOMターゲットがそうであるかどうかを調べる必要がありますchild。

例

$(this).hover(function(e){
    if($(e.target).is('div#child'))
    {
        // your child span is being hovered over
        e.stopPropagation();
    }
    else if($(e.target).is('div#parent'))
    {
        // your parent element is being hovered over
    }
});
于 2013-03-19T03:41:15.300 に答える