当我将光标移动到元素上而不离开元素时调用 onmouseout JavaScript 事件答案

【问题标题】：onmouseout JavaScript event being called when I move the cursor over an element without going out of the element当我将光标移动到元素上而不离开元素时调用 onmouseout JavaScript 事件
【发布时间】：2010-09-27 16:17:53
【问题描述】：

我在页面中有一张图片，在该图片的onmouseover 事件中，我将调用一个JavaScript 函数来显示工具提示，在图片的onmouseout 中，我将调用一个方法来隐藏工具提示。现在我发现当我将光标放在图像上时，它正在调用显示工具提示div的方法。

如果我在图像中移动鼠标，它会调用onmouseout 事件（即使我不在图像之外）。我怎样才能阻止这个？我希望在光标不在图像时调用onmouseout。有什么想法吗？

我是这样称呼它的：

 <img src="images/customer.png" onmouseout="HideCustomerInfo()" onmouseover="ShowCustomerInfo(485)" />

在我的 JavaScript 中：

 function ShowCustomerInfo(id) {


 var currentCustomer = $("#hdnCustomerId").val();   
 if (currentCustomer != id) { // to stop making an ajax call everytime when the mouse move on the same image
     
     $.get('../Lib/handlers/userhandler.aspx?mode=custinfo&cid=' + id, function (data) {
         strHtml = data;
     });

     tooltip.show(strHtml);   // method in another jquery pluggin
     $("#hdnCustomerId").val(id);
 }
}

function HideCustomerInfo() {

 tooltip.hide();    // method in another jquery pluggin
 $("#hdnCustomerId").val(0); //setting in a hidden variable in the page

 }

【问题讨论】：

标签： javascript dom-events onmouseout

【解决方案1】：

我假设您正在将鼠标悬停在您的工具提示上？并且工具提示的标记超出了图像的范围？

因此，从技术上讲，通过将鼠标悬停在工具提示上，您将离开图像。我也遇到过类似的事情。

要解决这个问题，请尝试在图像周围粘贴div，并将鼠标事件放在div 上，然后作为div 的子元素有你的工具提示，所以即使你当时正在使用鼠标在工具提示上方，您仍在 div 内。

这可能行得通。

【讨论】：

没有将鼠标悬停在工具提示上。而是将鼠标悬停在我在鼠标悬停事件上附加工具提示显示方法的图像上
尝试绑定到 mouseleave 而不是 mouseout？这是用jquery吗？？
我已经尝试过你的代码并且它可以工作.....一定与工具提示有关，我删除了你函数中的所有内容并且只有警报，我在鼠标悬停时发生了一次火灾当我离开图像时，另一场火灾。在图像上移动时，我也没有接到数百个电话。尝试在工具提示周围移动标记，使其远离图像显示数据。
我仔细研究并意识到当我在图像上移动鼠标时，它正在进入工具提示 div 并因此调用图像的 mouseout。我的工具提示靠近光标（所以也接近图像）。我只是更改了工具提示的 css，使其距离光标 50 px，这样我的光标就不会回到工具提示。感谢 jimplode 指导这方面。成功了

【解决方案2】：

如果您用来悬停的图像具有透明度（它是 png，对），那么当您将鼠标移到图像的透明部分上时，您将收到一个 onmouseout 事件。是的，这很糟糕。我有同样的问题，但还没有优雅的解决方案。

【讨论】：

【解决方案3】：

解决此问题的另一种简单方法是在工具提示中设置pointer-events: none

【讨论】：

【解决方案4】：

您确定HideCustomerInfo() 被图像的onmouseout 事件处理程序调用吗？另外，您在哪些浏览器中获得它？您是否在某个特定浏览器中出现这种行为？

【讨论】：