子元素的 JavaScript 鼠标悬停/鼠标移出问题

Posted 2023-02-19

【中文标题】子元素的 JavaScript 鼠标悬停/鼠标移出问题

【英文标题】：JavaScript mouseover/mouseout issue with child element

【发布时间】：2012-05-23 23:36:53

【问题描述】：

我有这个小问题，我请求您的帮助。 我有一个 div 元素，里面有一个 img 元素，像这样

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
    <img id="child" src="button.png" style="visibility: hidden" />
</div>

<script type="text/javascript">
    function MyFuncHover() 
        // Here I have some code that makes the "child" visible
    

    function MyFuncOut() 
        // Here I have some code that makes the "child" invisible again
    
</script>

如您所见，图像是 div 的子级。我希望只有当我离开 div 时，孩子才会消失。然而，当我将鼠标移到图像上时，似乎调用了 MyFuncOut() 函数（因为，我想，我通过悬停图像离开了 div）。我不希望这种情况发生。我希望只有在我离开 div 区域时才调用 MyFuncOut() 函数。

我不知道当您将鼠标移到子控件上时，它的父级会调用 mouseout 事件（即使我在子级上，我仍然在父级上）。我陷入了困境，我需要你的一些好建议。谢谢！

变化

好的。当我“mouseout”孩子时，事件冒泡不会将“mouseout”事件发送给父母。当我“鼠标悬停”孩子时，它也不会向父母发送“鼠标悬停”事件。那不是我需要的。当我“鼠标悬停”孩子时，我需要不发送父母的“mouseout”事件。得到它？例如，当我不希望将子项上的单击事件传播给父项时，事件冒泡很有用，但这不是我的情况。奇怪的是，当我“将鼠标悬停”它们时，我在同一个父元素中还有其他元素不会触发父元素的“mouseout”事件。

【参考方案1】：

简单设置子元素的css pointer-event:none; 见例子：

#parent 
  width: 500px;
  height: 500px;
  border: 1px solid black;


#child 
  width: 200px;
  pointer-events: none; # this does the trick

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
    <img id="child" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" />
</div>

<script type="text/javascript">
    function MyFuncHover() 
      console.log("mouse over")
    

    function MyFuncOut() 
      console.log("mouse out")
    
</script>

【参考方案2】：

我也遇到过这个问题，无法让它工作。这就是我所做的。它更简单，而且不是 JavaScript，因此速度更快且无法关闭。

div.container 
    opacity:0.0;
    filter:alpha(opacity="00");


div.container:hover 
    opacity:1.0;
    filter:alpha(opacity="100");

您甚至可以为不透明度添加 CSS3 过渡，使其具有更平滑的感觉。

【讨论】：

或者只是给它可见性：在正常情况下隐藏和可见性：在悬停时可见。

这个过滤器：alpha(opacity="100");适用于 IE，另一个适用于其他所有浏览器。

【参考方案3】：

您可以使用下面的解决方案，它是纯 javascript，我使用成功。

var container = document.getElementById("container");
var mouse = x: 0, y: 0;

function mouseTracking(e) 
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY;
    var containerRectangle = container.getBoundingClientRect();

    if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right &&
            mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) 
        // Mouse is inside container.
     else 
        // Mouse is outside container.
    

document.onmousemove = function () 
    if (document.addEventListener) 
        document.addEventListener('mousemove', function (e) 
            mouseTracking(e);
        , false);
     else if (document.attachEvent) 
        // For IE8 and earlier versions.
        mouseTracking(window.event);
    

希望对你有帮助。

【讨论】：

谢谢...我认为这是一个很好的解决方案，因为它可以与 addEventListener 一起用于元素的动态绑定事件

【参考方案4】：

您可以使用 jquery 中可用的“mouseenter”和“mouseleave”事件，这是下面的代码，

$(document).ready(function () 
        $("#parent").mouseenter(function () 
            $("#child").show();
        );
        $("#parent").mouseleave(function () 
            $("#child").hide();
        );
    );

上面是附加一个事件，

<div id="parent">
    <img id="child" src="button.png" style="display:none;" />
</div>

【讨论】：

我只想用 JavaScript 来做，谢谢，这可能是最后的解决方案。

@ali mouseleave 实际上是一个普通的 javascript 事件，所以你可以忽略 jQuery 部分，直接使用它。它和 mouseleave 之间的唯一区别是它不会冒泡，因此子 mouseleave 不会导致父节点获得相同的事件。

【参考方案5】：

只需在您的 MyFuncOut 函数中添加一个 if 语句来检查目标不是图像

if (event.target !== imageNode) 
     imageNode.style.display = 'none'

【讨论】：

这里有一个演示 jsfiddle.net/HvMjN/4 使用我上面所说的方法。事实证明，更现代的事件 mouseout 和 mouseenter 具有您最初预期的行为，因此您可以使用您的代码只需更改事件类型 jsfiddle.net/HvMjN/6

谢谢，唯一的问题是它在 IE6 上不起作用（错误：对象不支持属性或方法 'addEventListener'）。然而，我认为这可以通过 parent.onmouseover 直接解决

只搜索跨浏览器事件绑定。 ie6 使用attatchEvent