当子元素上的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;
});

    ,在子事件（两个函数）中，调用e.stopPropagation（） 编辑： 好的，抱歉，我以前没有看过该演示。您可以将子代码更改为以下内容：

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

    ,该解决方案修改了核心插件。 使用最新版本的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) {

这允许您从子级/单独的交互中创建任何逻辑，并通过切换类preventIntent来抑制hoverIntent的\“ over \”函数。 例：

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

或者，可以使用\“ ignoreChild \”选项选择器改进核心插件，该选项选择器在每个循环上执行.is（\“：hover \”）检查。这样可以减少对额外鼠标事件的需求，但只能使其明显地徘徊。