Internet Explorer和<select>标记问题

Question

我在Internet Explorer 7/8下遇到以下问题:

我有一个弹出窗口,当用户鼠标悬停链接时会被激活.弹出窗口是一个简单的<div>包含一些数据.在这个<div>标签里面有一个<select>带有<option>s 的标签.我已将mouseover/mouseout事件附加到<div>,这样当光标在它上面时,此弹出窗口将保持打开状态.当您单击<select>然后将光标移动到任何<option>s上时,会出现问题.这会触发<div>标记的mouseout事件并分别关闭它.

如何防止在IE中关闭弹出窗口？

Answer 1

您应该能够通过事件中的值来检测情况是否是您想要的情况.这有点令人费解,但似乎有效.

在你的外部事件处理程序中div,执行以下操作:

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

然后实现isReal方法:

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;
}

基本上该isReal方法只是检测事件是否来自div内.如果是,则返回false,避免调用hide切换.