如何在子元素上的hoverIntent触发时取消父元素上的hoverIntent？

问题描述：

我有一个父元素，当悬停时显示一个元素。我还有一个子元素，当它悬停时显示一个不同的元素。如何在子元素上的hoverIntent触发时取消父元素上的hoverIntent？

我不希望它们都在同一时间触发 - 也就是说，如果您将鼠标悬停在孩子身上，我只想显示它是关联的元素 - 并禁止将鼠标悬停在父元素上方。

我无法使其可靠地工作。可能丢失了一些明显的东西。有任何想法吗？

编辑 - 澄清：

“父”，在这种情况下，“孩子”是不知道彼此独立的可重用的组件，所以我不能真正注入从一个上下文到另一个

这里是我用jQuery设置的演示& hoverIntent插件。

HTML：

<div id="parentBar"> 
    <ul id="childMenu"> 
     <li>Menu 1</li> 
    </ul> 
</div> 

<div id="barInfo"> 
    <p>This is shown when hovering overing inside of the parent bar.</p> 
</div> 

<div id="menuInfo"> 
    <p>This is shown when hovering over inside of the child menu.</p> 
</div>

CSS：

#parentBar{width:500px;border:solid 1px black;} 
#childMenu{margin-left:10px;padding-left:10px;width:100px;border:solid 1px green;} 
#menuInfo, #barInfo{display:none;}

的JavaScript：

$('#parentBar').hoverIntent({ 
    //interval: 500, 
    over: function(e) { 
     $('#barInfo').show(); 
    }, 
    out: function(e) { 
     $('#barInfo').hide(); 
    } 
}); 

$('#childMenu').hoverIntent({ 
    //interval: 250, 
    over: function(e) { 
     $('#menuInfo').show(); 
    }, 
    out: function(e) { 
     $('#menuInfo').hide(); 
    } 
}); 

$('#childMenu').bind('mouseenter', function(e){ 
    e.stopPropagation(); 
});

，您可以在这里查看它的jsfiddle：http://jsfiddle.net/hNqQ7/1

答

var flag = false; 
$('#parentBar').hoverIntent({ 
    interval: 500, 
    over: function(e) { 
    if(!flag) { 
     $('#barInfo').show(); 
    } 
    }, 
    out: function(e) { 
    $('#barInfo').hide(); 
    } 
}); 

$('#childMenu').hoverIntent({ 
    interval: 250, 
    over: function(e) { 
    $('#menuInfo').show(); 
    }, 
    out: function(e) { 
    $('#menuInfo').hide(); 
    } 
}).mouseenter(function(){ 
    flag= true; 
}).mouseleave(function(){ 
    flag = false; 
});

那么 - 停止传播不是一个有效的解决方案是黑色和白色？我不明白为什么它不起作用。 – 2011-05-25 19:35:20

因为stopPropagation可以与同类型的事件一起使用。如果你打开这个插件的代码，你可以看到它不使用诸如“hoverIntent”事件之类的东西，当你设置了over和out选项时，它不是一个直接的事件处理程序。我的解决方案适合你吗？ – silex 2011-05-25 19:40:03

如果我看看插件，它将它的处理程序连接到“mouseenter”事件 - 这正是我已经绑定到子元素的地方，并且我称之为stopPropagation（） - 我欣赏答案，我确信这种类型的跟踪将起作用 - 我只是没有想到必须诉诸它。 – 2011-05-25 23:36:20

答

在子事件（包括功能），请致电e.stopPropagation()

编辑：好吧，对不起，我以前没有看过演示。您可以将孩子的代码更改为以下：

$('#childMenu').hoverIntent({ 
    interval: 250, 
    over: function(e) { 
     $('#barInfo').hide(); 
     $('#menuInfo').show(); 
    }, 
    out: function(e) { 
     $('#barInfo').show(); 
     $('#menuInfo').hide(); 
    } 
});

http://jsfiddle.net/hNqQ7/2/ - 下面是演示，所做的更改，相同的行为。 – 2011-05-25 19:09:31

好吧，编辑答案 – Dave 2011-05-25 19:18:47

我想我应该澄清，在这种情况下，“父母”和“孩子”是单独的可重用组件，彼此不知道，所以我实际上不能将上下文从一个注入到其他。 – 2011-05-25 19:21:04

答

该解决方案修改的核心插件。

使用最新版本的hoverIntent，https://github.com/briancherne/jquery-hoverIntent，我做了一个简单修改核心功能，比较，从mouseenter触发。

查找（〜65行）：

if (Math.sqrt((s.pX - cX) * (s.pX - cX) + (s.pY - cY) * (s.pY - cY)) < cfg.sensitivity) {

，代之以：

if (!$el.hasClass("preventIntent") && Math.sqrt((s.pX - cX) * (s.pX - cX) + (s.pY - cY) * (s.pY - cY)) < cfg.sensitivity) {

这允许你创建儿童/独立的互动;任何逻辑，并通过抑制hoverIntent的 “过度” 功能切换类preventIntent。

示例：在每个循环：

$(".child-ele").on("mouseenter", function(e) { 
    $(this).closest(".parent-ele").addClass("preventIntent"); 
}).on("mouseleave", function(e) { 
    $(this).closest(".parent-ele").removeClass("preventIntent"); 
});

替代地，芯插件可以用一个“ignoreChild”选项选择器，其执行。是的检查（“悬停”）而得到提高。这可以减少额外的鼠标事件的需要，但限制它显然只是悬停。

如何在子元素上的hoverIntent触发时取消父元素上的hoverIntent？

相关推荐