3

所有，我遇到了一个处理嵌套元素悬停处理程序的问题。看来当鼠标进入childdiv时，祖先也处于hover状态，有什么方法可以触发hoverout祖先事件，当鼠标进入child元素时？

以下是我到目前为止尝试做的事情。请审查它。

<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()方法为mouseenter和mouseleave事件绑定处理程序。您可以使用它在鼠标位于元素内时简单地将行为应用于元素。

但是，如果您使用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为所有 div 注册处理程序

于 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 回答