Previous Message
Next Message

(OT) JS question: mouseout & <ul>

Sent by Nick Fitzsimons on 28 February 2005 00:12


On 27 Feb 2005, at 23:27, Mark Lundquist wrote:

> Does anybody know if there's a good Javascript discussion forum I 
> should be posting this to (i.e., comparable in quality to css-discuss 
> :-)?
>

try:
[https://lists.LaTech.edu/mailman/listinfo/javascript]

> In the meantime, maybe someone here just happens to have the answer to 
> my question... :-)
>
> If you look at http://wrinkledog.com/~ml/crap.html, there are two 
> red-outlined things:
>
> 	1) a <div> containing a <ul>;
> 	2) a <p> containing some text.
>
> Both of these elements have a mouseout event handler set.  (2) behaves 
> as I would expect; (1) is just nuts.  Does anybody know the 
> explanation for this?  It's the same in Firefox, Safari and IE.

At the risk of incurring the wrath of the good Mr Meyer by going OT...

What's happening is an onmouseout event firing because the cursor is 
leaving the div when it enters the li. I replaced your function with 
the following code:

window.onload = function() {
    var feedback = document.createElement("pre");
    document.body.appendChild(feedback);
    var uld = document.getElementById("div-containing-ul");
    uld.onmouseover = function() {
       feedback.appendChild(document.createTextNode("div-containing-ul 
onmouseover\n"));
    }
    uld.onmouseout = function() {
       feedback.appendChild(document.createTextNode("div-containing-ul 
onmouseout\n"));
    }
    var pct = document.getElementById("p-containing-text");
    pct.onmouseout = function() {
       feedback.appendChild(document.createTextNode("p-containing-text 
onmouseout\n"));
    }
    var lis = uld.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
       lis[i].onmouseover = function() {
          feedback.appendChild(document.createTextNode("li 
onmouseover\n"));
        }
       lis[i].onmouseout = function() {
          feedback.appendChild(document.createTextNode("li 
onmouseout\n"));
       }
     }
}

and got results like:

p-containing-text onmouseout
div-containing-ul onmouseover
div-containing-ul onmouseout
li onmouseover
div-containing-ul onmouseover
li onmouseout
div-containing-ul onmouseout
li onmouseover
div-containing-ul onmouseover
li onmouseout

As I'm not sure what you're planning to do with this, I don't know what 
to advise, but hopefully knowing that this is what is happening will 
help you get on track.

Regards,

Nick Fitzsimons.
-- 

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: