Broken onmouseout

JavaScript
1

This function does not work. I wanted to set a 500 millisecond timer on it.


comp_list.onmouseout = window.setTimeout(function (){
		 if (hasClass(comp_list, 'block'))
		 {
			 removeClass(comp_list, 'block');
			 removeClass(comp_drop, 'active');
		 }
	 }, 500);
2

You are assuming that the function knows about comp_list and comp_drop. This would be the case if they were global variables. Are they?

3

Yes, they are global.

I fixed the function but now it just doesn’t do what I want. I want it to have a delay when I mouse out. setTimer is just says for it to stay visable for 3.5 seconds. How do I get the delay effect?


comp_list.onmouseout=function(){
	 setTimeout(function (){
	 		 if (hasClass(comp_list, 'block'))
	 		 {
	 			 removeClass(comp_list, 'block');
	 			 removeClass(comp_drop, 'active');
	 		 }
	 	 }, 3500);
	 }
4

You seem to be assuming the function is not being fired after 3.5 seconds rather than the function is not doing what you expect it to do.

A simple debug step would be to put a couple alerts in the function. One so you are alerted when the function is executed and two what the conditional is true.

comp_list.onmouseout=function(){
     setTimeout(function (){
           alert("function entered") 
           if (hasClass(comp_list, 'block'))
            {
               alert("hasClass satisified") 
               removeClass(comp_list, 'block');
               removeClass(comp_drop, 'active');
            }
         }, 3500);
     }
5

I am being alerted while i’m still hovered over com_list. I want this to only set the timer / delay after I leave the drop down menu.

6

In sounds like you have the onmouseout event tied to a <SELECT>.

Now there are two components to this the select box itself and the dropdown list. As soon as you move onto the list your mouseout event is fired. That is the dropdown list is not an extension of the control.

He’s a little test html

<html>
<head>

<script type="text/javascript">
<!--
var theselect;
window.onload = function () {
   theselect = document.getElementById("idcomp");
   theselect.onmouseout = function () {
        setTimeout(function() {
            alert("hello");
             }, 1000);
   };
};
// -->
</script>
</head>
<body>
<select id="idcomp" name="comp">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</body>
</html>

Whilst your in the confines of the select itself you will not get the control (unless you are experiencing the time delay). If you make the dropdown list appear and move very slightly into it the alert will be given.

Might this be the cause of your problem?

7

You can avoid all of these problems by using an onchange handler instead of an onmouseout. This will only fire after you have made your choice. Here is the script.

var theSelect;
window.onload = function ()
{ theSelect = document.getElementById(“idcomp”);
theSelect.onchange = function () {
setTimeout(“alert(‘hello’)”, 1000);
}
}

Please note that I have changed the way you wrote the timeout. The first component only needs to be a javascript statement, so you can get rid of the function call and use the script directly as I have done.