div onmouseout functionality?

@ck_bulletMay 06.2005

i have a div and then a table nested in the div like so:

whenever i move my mouse within the div it correctly calls the move function, but the onmouseout attribute doesnt work like i thought. i thought that the out() function would only be called if you moved your mouse off the div, but out() is called whenever i move off one of the table rows. so if my mouse is on a row and i move to the next row it calls out(). i want out() to be called only when the user moves off the entire div. any ideas?

to post a comment

JavaScript

9 Comments(s) _↴

@A1ien51May 06.2005 — #Can you post all your code so I can help you change it.....

@nzakasMay 06.2005 — #The problem is that what's refered to as event "bubbling", where an event bubbles up the DOM tree looking for a handler. When you assign an event handler to the <div/>, you're actually also assigning an event handler to all of the <div/>'s children. So when you mouseover a table cell, it looks like this:

1) is there a onmouseover event handler for <td/>? no, so

2) is there a onmouseover event handler for <tr/>? no, so

3) is there a onmouseover event handler for <table/>? no, so

4) is there a onmouseover event handler for <div/>? yes, so execute it.

What you can do to help is to check the source of the event in the out() function, like this:

function out() {
 if (event.srcElement.tagName == "DIV") {
 //do your stuff here
 } else {
 //nevermind, don't do anything
 }
 
 }

@memarkMay 07.2005 — #Excellent explanation!!

(Which I'll try to remember if I ever run into a situation like this. ?)

@HaganeNoKokoroMay 07.2005 — #Supposedly you can have some control over what happens in event bubbling http://www.quirksmode.org/js/events_order.html

@markmclOct 07.2007 — #Zakas, you are the man. But what's up with this?

I'm trying to close this DHTML div pop-up on the onmousout event of the DHTML div.

Problem is, I can't bubble out to the containing Div that I am looking for (checking the tagname, then id as I bubble up). Well, actually, I do get to the element, but it is very inconsistent - seems like when I move my mouse out on the bottom, left and right, but not on the top!

I think maybe I don't truly understand event bubbling. I don't know why I'm not getting to my function when I move the mouse out on the top.

Basically, is there something that I'm not thinking of that stops the event bubbling? The onmouseout is not defined by any element within the pop-up.

Here is the complete page (stripped down a bit). Why doesn't the box close??

<html>

<head>

<title>TestDisplay</title>

<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">

<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">

<meta name="vs_defaultClientScript" content="JavaScript">

<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

<script>

function out(e){

var element;

/*

if (window.event){

element = window.event.srcElement;

}else if (e){

element = e.target;

}

*/

if (!e) var e = window.event;

//e.cancelBubble = false;

if (e.target){

element = e.target;

//e.returnValue = true;

}else{

element = window.event.srcElement;

//window.event.returnValue = true;

}

//alert(element.tagName);
  if (element.tagName == "DIV"){
   alert(element.id);
   //if (element.id == "DescriptionDiv" + String(myID)){
   //	hideDescription();
   //} 
   //document.getElementById(myID).style.visibility = 'hidden';
  }
  if (element.tagName == "TABLE"){
   //alert(element.id);
   //hideDescription(sID);
   //document.getElementById(myID).style.visibility = 'hidden';
  }
 
  //return (true);

}

function showDescription(){

document.getElementById("DescriptionDiv1").style.visibility = 'visible';

}

function hideDescription(){

document.getElementById("DescriptionDiv1").style.visibility = 'hidden';

}

 </script>
  </head>
  <body MS_POSITIONING="GridLayout">
   <form id="Form1" method="post" runat="server">
   <table cellpadding="0" cellspacing="0">
   <tr>
   <td style="padding-top:50px;padding-left:50px;">
   <div id='DescriptionParentDiv1'>
   <table id="tableName"
   cellpadding="0" cellspacing="0" height="25" width="400">
   <tr>
   <td valign="top">
   <div id='DescriptionDiv1' style='position:absolute;visibility:hidden;' onmouseout="out(event);return true;">
   <div id='DescriptionShiftDiv' style='position:relative;left:-9px;top:-2px;' >
   <table bgcolor='#ffffff' width='400' cellspacing='0' cellspacing='0' style="border-left:solid 1pt #000000;border-right:solid 1pt #000000;border-bottom:solid 1pt #000000;border-top:solid 1pt #000000;">
   <tr>
   <td></td>
   <td style='width:95%;'>
   <nobr>Test&nbsp;&nbsp;</nobr>
   </td>
   <td></td>
   </tr>
   <tr>
   <td >&nbsp;</td>
   <td style='padding-top:8px;padding-bottom:5px;'>
   Test Description
   </td>
   <td>&nbsp;</td>
   </tr>
   <tr>
   <td></td>
   <td>&nbsp;</td>
   <td></td>
   </tr>
   </table>
   </div>
   </div>
   <span class="DescriptionHeader"><b>Test</b></span> &nbsp;<img src="mybutton.gif" onmouseover="javascript:showDescription();window.status='';return true;" alt="more" border="0"  />
   </td>
   </tr>
   </table>
   </div>
   </td>
   </tr>
   </table>
   </form>
  </body>

</html>

@NareshKavaliDec 30.2009 — #The problem is that what's refered to as event "bubbling", where an event bubbles up the DOM tree looking for a handler. When you assign an event handler to the <div/>, you're actually also assigning an event handler to all of the <div/>'s children. So when you mouseover a table cell, it looks like this:

1) is there a onmouseover event handler for <td/>? no, so

2) is there a onmouseover event handler for <tr/>? no, so

3) is there a onmouseover event handler for <table/>? no, so

4) is there a onmouseover event handler for <div/>? yes, so execute it.

What you can do to help is to check the source of the event in the out() function, like this:

function out() {
 if (event.srcElement.tagName == "DIV") {
 //do your stuff here
 } else {
 //nevermind, don't do anything
 }
 
 }

[/QUOTE]

Surprisingly this does not work in IE.

try this code which works in IE, Firefox and chrome as well

var toElement = null;

if (event.relatedTarget)

toElement = event.relatedTarget;

else if (event.toElement)

toElement = event.toElement;

 if (toElement && toElement.tagName != "DIV"){
   // ur code
   }

@el07694Jan 18.2011 — #The problem is that what's refered to as event "bubbling", where an event bubbles up the DOM tree looking for a handler. When you assign an event handler to the <div/>, you're actually also assigning an event handler to all of the <div/>'s children. So when you mouseover a table cell, it looks like this:

1) is there a onmouseover event handler for <td/>? no, so

2) is there a onmouseover event handler for <tr/>? no, so

3) is there a onmouseover event handler for <table/>? no, so

4) is there a onmouseover event handler for <div/>? yes, so execute it.

What you can do to help is to check the source of the event in the out() function, like this:

function out() {
 if (event.srcElement.tagName == "DIV") {
 //do your stuff here
 } else {
 //nevermind, don't do anything
 }
 
 }

[/QUOTE]

Thanks man! I have this problem tonight and your code fix it!

@rpg2009Jan 18.2011 — #I knocked this diagram up for myself recently just to clarify related target, toElement and fromElement. Might be useful.

http://img14.imageshack.us/i/relatedtarget.jpg/

(No image tags??)

For a mouseout the related target is where you're heading to (toElement). Obviously you want this to be outside of your div.

(For mouseover the relatedtarget is where you have come from.)

What you need to do is recursively check the ancestors (parentNodes) of relatedtarget to see if they eventually == your div. If they do then you know to ignore it i.e. the event fired within the div element on one of the childnodes. If not you can then execute your callback function

So something like this.

[CODE]var parent = event.relatedtarget;
 
 while ( parent && parent != divElement ) {
 parent = parent.parentNode;
 }
 
 if (parent != divElement) { // relatedtarget is outside of the div
 // execute function
 }[/CODE]

mouseenter and mouseleave (IE only) actually do this filtering for you ignoring the bubbled events.

@rpg2009Jan 18.2011 — #Didn't realise this was originally posted in 2005 and the likes of Nicholas Zakas had responded. Thought 16,000+ views was quite high.?

Also in #JavaScript _↴

GetElementById( i need 3 IDs here)Problem with javascript validation Selectbox Options into Text Field for Autocomplete.

Success!

Help @ck_bullet spread the word by sharing this article on Twitter...

Tweet This

div onmouseout functionality?

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

div onmouseout functionality?

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴