onmouseout在它设置的元素内部触发 [英] onmouseout fires inside the element it's set to

问题描述

我目前正在将我的网站菜单从纯JavaScript切换到jQuery。我的菜单有一个rollout / rollin效果。

菜单有一个外包装器，它有一个onmouseout事件集。如果触发，则检查relatedTarget是否为外包装器的子项。如果没有，则会发生滚动。

现在发生的事情是，如果鼠标从菜单的内包装器移动（这是将实际菜单置于中心位置）菜单的外包装，onmouseout开火。似乎有一小部分不属于menuOuterWrapper。

该网站现在不在线，所以我准备了一个小提琴这里。如果将鼠标从手柄上方的灰色区域移动到左侧或右侧暗区，您将看到问题。菜单将滚入，然后立即再次出现。只有当鼠标移出外包装时，即在深灰色区域（或浅灰色手柄区域）下，才会发生滚动。要查看深灰色区域，可能必须增加结果块的宽度。

SO告诉我链接时我会包含代码到JSFiddle。我不想违反规则，但我会说实话：我对这个问题的来源毫无头绪。我最好的想法是我在isChildOf实现中犯了一个错误，所以我会给你这个：

  jQuery.fn。 isChildOf = function（parentId）{
 if（$（this）.parents（＃+ parentId）。length> 0）{
 return true; 
} else {
返回false; 
} 
}; 
 
 $（'＃outer'）。on（'mouseout'，function（event）{
 if（！$（event.relatedTarget）.isChildOf（outer））{
 mouseIsOverMenu = false; 
 menu_rollin（）; 
} 
}）; 
  

虽然这是一个最小的例子，但我在纯JS中的表现几乎一样，但它工作得很好。所以我猜这是jQuery部分的内容。由于这些是我使用jQuery的第一步，所以更有可能。

我们非常感谢您提供的每一个帮助：）

[更新]

我现在正在使用它。问题是我没有检查relatedTarget本身是否为外部。因此，当鼠标离开内容div并进入外部div时，mouseout会发生火灾，当然，外部不是自己的孩子。所以我把它修改为

  $（'＃outer'）。on（'mouseout'，function（event）{
 if（！（event.relatedTarget.id ==outer）&& 
！$（event.relatedTarget）.isChildOf（outer））{
 mouseIsOverMenu = false; 
 menu_rollin（）; 
} 
}）; 
  

这解决了问题。

解决方案

这是一个肮脏的黑客，但你的问题似乎是鼠标输出功能太频繁应用，你真正想要的功能是捕捉鼠标离开菜单/内容的底部。 / p>

这里有一些代码可以做到这一点。

  $（' #outer'）。on（'mouseout'，function（event）{
 if（event.clientY> = document.getElementById（'outer'）。offsetHeight）{
 mouseIsOverMenu = false; 
 menu_rollin（）; 
} 
}）; 
  

这里是关联的jsFiddle

I am currently switching the menu of my site from pure JavaScript to jQuery. My menu has a rollout / rollin effect.

The menu has an outer wrapper which has an onmouseout event set. If this fires, the relatedTarget is checked whether it's a child of the outer wrapper. If not, the rollin shall happen.

What happens right now is, that if the mouse is moved from the menu's inner wrapper (this is to center the actual menu) to the menu's outer wrapper, the onmouseout fires. There seems to be a tiny part which doesn't belong to the menuOuterWrapper.

The site isn't online right now, so I've prepared a Fiddle here. You will see the problem if you move your mouse from the gray area above the handle to the left or right dark area. The menu will roll in and then immediately out again. The rollin shall only occur when the mouse is moved out of the outer wrapper, i.e. under the dark gray area (or the light gray handle area). To see the dark gray areas, you might have to increase the width of the result block. [EDIT: I reduced the width of inner to 600px, so the dark side areas should be visible by default now.]

SO tells me that I shall include code when linking to JSFiddle. I don't want to break the rules but I'll be honest: I'm clueless where the problem comes from. My best idea is that I made a mistake in my isChildOf implementation, so I'll give you this:

jQuery.fn.isChildOf = function (parentId) {
    if ($(this).parents("#" + parentId).length > 0) {
      return true;
    } else {
      return false;
    }
};

$('#outer').on('mouseout', function(event) {
    if (!$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

Although this is a minimal example, I did nearly the same with pure JS, where it worked fine. So I guess it's something in the jQuery part. Since these are my first steps with jQuery, it is even more likely.

Every help you can provide is highly appreciated :)

[UPDATE]

I got it working now. The problem was that I didn't check for the relatedTarget to be "outer" itself. So when the mouse leaves the content div and enters the outer div, mouseout fires and of course, outer is no child of itself. So I amended it to

$('#outer').on('mouseout', function(event) {
    if (!(event.relatedTarget.id == "outer") &&    
        !$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

and that fixed the problem.

解决方案

This is a dirty hack, but your problem seems to be with the mouseout function applying too frequently, and what functionality you really want is capturing the mouse leaving the bottom of the menu/content.

Here's some code that will do just that.

$('#outer').on('mouseout', function(event) {
    if(event.clientY >= document.getElementById('outer').offsetHeight){
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

here's the associated jsFiddle

这篇关于onmouseout在它设置的元素内部触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！