onmouseout JavaScript event being called when I move the cursor over an element without going out of the element - Stack Overflo

admin管理员组

文章数量:1391960

I have an image in a page and in the onmouseover event of that image I will call a JavaScript function to show a tooltip and in the onmouseout of the image, I will call a method to hide the tooltip. Now I found that when I place the cursor on the image, it's calling the method to show the tooltip div.

And if I move the mouse within the image, it's calling the onmouseout event (even if I am not out of the image). How can I stop this? I want onmouseout to be called when the cursor is out of the image. Any thoughts?

Here is how I call it:

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

And in my 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

 }

I have an image in a page and in the onmouseover event of that image I will call a JavaScript function to show a tooltip and in the onmouseout of the image, I will call a method to hide the tooltip. Now I found that when I place the cursor on the image, it's calling the method to show the tooltip div.

And if I move the mouse within the image, it's calling the onmouseout event (even if I am not out of the image). How can I stop this? I want onmouseout to be called when the cursor is out of the image. Any thoughts?

Here is how I call it:

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

And in my 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

Share Improve this question Follow edited Sep 30, 2020 at 7:18 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 27, 2010 at 16:17 ShyjuShyju 219k106106 gold badges420420 silver badges498498 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I am assuming you are mousing over your tooltip? and the tooltip has its markup outside the realm of the image?

So by mousing over the tooltip you are technically leaving the image. I have had similar things happen to me.

To get around this, try sticking a div around the image, and putting the mouse event on the div, then as a child element to the div have your tooltip, so even when you are then mousing over the tooltip, you are still inside the div.

That might work.

Another easy way to get around this is by setting pointer-events: none on your tooltip

If the image tht you are using to hover over has transparency (it's a png, right), then when you move the mouse over a transparent portion of the image you'll get an onmouseout event. yeah, it sucks. I have the same problem and no elegant solution for it yet.

Are you sure HideCustomerInfo() is called by the onmouseout event handler of the image? Also, what browsers do you get that in? Do you get this behavior in one particular browser?

本文标签：