點擊任意元素，指定元素隱藏，div如何擁有得到焦點事件

點擊任意非自己元素，指定元素隱藏

在實際開發過程當中常常遇到以下問題：
1.鼠標通過下拉框顯示隱藏，例如導航下拉
2.鼠標點擊下拉框顯示，鼠標點擊其它任意元素，下拉框隱藏。
第一種方法很是容易實現，可是第二種方法就很是的頭疼了，爲此將介紹兩種方案解決第二個問題。

1、使用點擊綁定法

---

jQuery代碼：

$("span").click(function(){
    $("ul").show();
})

$(document).click(function(){
    $("ul").hide();
})
//div爲指定的「觸發下拉控件」
//若是「觸發下拉控件」和指定的顯示隱藏元素不是上下級別關係，也須要對顯示隱藏元素阻止冒泡
$("div").click(function(){
    return false;
})

html佈局：

弊端：

• html文檔中有其它元素是阻止冒泡的，那麼這種作法是不能徹底達到預期效果的。

• 任意一個元素點擊都須要觸發div的隱藏，這種作法很是消耗資源。

設想：若是div也能像input文本框那樣有焦點屬性，這種問題是否是迎刃而解?!

2、如何讓div擁有焦點屬性

增長tabindex，修改html以下：

jQuery寫法以下：

---

$("div").focus(function(){
    $("ul").show();
}).blur(function(){
    $("ul").hide();
})

優勢：

• 佔用資源少

• 方法實現容易理解

• 兼容性好