Javascript 如果父元素有边框，当鼠标同时退出父元素和子元素时，如何避免父元素的mouseover事件

编辑：我想要的是，当鼠标离开嵌套div和父div时，嵌套div不会移动。我很确定它当前正在移动，因为边框以某种方式将父div延伸到嵌套div之外。我希望保留边框

就像有人说过的

我有一个嵌套在div中的div

<div class='parent'>
    <div>Check me out</div>
</div>

以及一些附带的Javascript

var navBar = document.querySelector('div.parent');
var navItems = navBar.querySelector('div');
var moveNav = false;
var overItems = false;

navBar.addEventListener('mouseout', function() { moveNav = false; });
navItems.addEventListener('mouseover', function() { overItems = true; });
navItems.addEventListener('mouseout', function() { overItems = false; });
navBar.addEventListener('mouseover', function() { moveNav = !overItems && true; });
navBar.addEventListener('mousemove', moveToMouse);
function moveToMouse(e) {
    if(!moveNav)
        return;
    navItems.style.left = (e.offsetX - Math.floor((e.offsetX+navItems.offsetWidth)/navBar.offsetWidth) * (e.offsetX + navItems.offsetWidth - navBar.offsetWidth + 10)) + 'px'
}

这样做的目的是当鼠标位于

.parent

div内时，将子div的某些部分放在鼠标下*

我想知道的是如何在鼠标退出

.parent

div时不移动子div？

换言之，我希望它的行为像它在。小提琴之间的区别在于，第一个小提琴在

.parent

周围有一个边框，第二个小提琴没有边框

当然，我也注意到，child div的动作不是平稳的，而是急促的。关于如何避免这种情况的建议是受欢迎的，但不是预期的

*如果有更好的方法，请指出**

---

**不要说“usejquery”

在带边框的div示例中，我使用了mouseenter事件而不是mouseover，它似乎按照您想要的方式工作

navBar.addEventListener('mouseenter', moveToMouse);

---

我真的不知道你的意思，但是。。我添加了css属性--“框大小：边框框；”这就是你想要的吗？@Shikkediel我找不到这些词。。。在第一个演示中，当您将鼠标移出

Check me out

的“going up”div时，将触发父级的mouseover事件。如果你看第二个演示，它没有。我很确定它会在第一个演示中触发，因为父级有边框，而不会在第二个演示中触发，因为父级没有边框。我试图了解如何避免鼠标悬停事件触发，但只有当鼠标从顶部或底部离开子对象时才会触发。

我注意到，子对象div会快速移动，而不是平稳移动。

。在上一个事件处理程序中将

mouseover

替换为

mousemove

：@mark我不这么认为。我认为事件在父对象上激发，因为父对象的边界延伸到子对象的前面。因此，在鼠标离开孩子之后，它就离开了父母。（我认为，如果没有边界，事件就不会触发这一事实不是一件好事）结论-在这种设置下无法完成。改为使用框阴影或轮廓（它们不是实际内容）。。。大多数情况下，一个人甚至根本没有在孩子身上移动鼠标，因此没有任何区别。谢谢，你是对的，但是，我真的很想使用Khanh建议的方法，这样嵌套的div将跟随鼠标移动，所以这对我不起作用。更新的问题反映了这一点

navBar.addEventListener('mouseenter', moveToMouse);