下拉式選單穿透圖層

2011-01-11

3355
0

摘要:下拉式選單穿透圖層

這篇要說的不是 IE 6有名的下拉式選單 bug。而是…例如進入http://buy.yahoo.com.tw/，點了下拉式選單，然後再把滑鼠移到上面的 div menu，造成如圖的效果：

解決辦法…就只是關掉下拉式選單，但，有些細節。

// 一開始寫了這個，但是 IE不動
var hide, selector = "select";
$(selector).mouseenter(function() {// ie 進入 option沒有 enter、over
    clearTimeout(hide);
}).mouseleave(function() {
    var $this = $(this);
    hide = setTimeout(function() {
        $this.blur();
    }, 200);
});

// 後來寫了這個，感覺簡單多了！應該也比較快
var $dropdown = $("select");
$("body").mouseover(function(event) {
    if ("SELECT,OPTION".indexOf((event.target.tagName||"").toUpperCase()) == -1) {
        $dropdown.blur();
    }
});

註：IE 6在下拉式選單打開的時候，mouseover一直都在 SELECT上，所以雖然關不掉下拉式選單，但 div menu也打不開，算負負得正吧XD

JavaScript

回首頁