Internet Explorer and <select> tag problem

Question

I am having the following problem under Internet Explorer 7/8:

I have a popup that gets activated when user mouseover a link. The popup is a simple <div> that contains some data. Inside this <div> tag there is a <select> tag with some <option>s. I have attached mouseover/mouseout events to the <div>, so that this popup will stay open while cursor is over it. The problem comes when you click on the <select> and then move the cursor over any of the <option>s. This triggers the mouseout event of the <div> tag and respectively closes it.

How can I prevent the closing of the popup in IE ?

Answer 1

You should be able to detect if the situation is the one you want just with the values off the event. It is a little convoluted but it seems to work.

In the event handler of your outer div, do something like this:

<div onmouseover="if (isReal()) { toggle(); }"
     onmouseout="if (isReal()) { toggle(); }">
</div>

Then implement the isReal method:

function isReal() {
    var evt = window.event;
    if (!evt) {
        return true;
    }

    var el;
    if (evt.type === "mouseout") {
        el = evt.toElement;
    } else if (evt.type === "mouseover") {
        el = evt.fromElement;
    }
    if (!el) {
        return false;
    }
    while (el) {
        if (el === evt.srcElement) {
            return false;
        }
        el = el.parentNode;
    }
    return true;
}

Basically the isReal method just detects if the event was coming from within the div. If so, then it returns false which avoids calling the hide toggle.

Answer 2

My suggestion would be to set another flag while the select box has focus. Do not close the div while the flag is set.