1、先看問題
當我們要對一個div/span元素獲取焦點的時候，直接對$("#div1").focus()是不能實現效果的，比如下圖：
當點擊輸入框進行輸入后，在點擊區域彈出選擇地段的時候，input輸入框並沒有失去焦點(或者說區域的div沒有獲得焦點)，就出現了鍵盤顯示在彈層的上面導致無法選擇的bug
解決辦法有兩個：
a:循環所有的input等可以獲取焦點的元素，讓他們失去焦點(blur);
b:點擊區域選擇地段的時候讓div獲取焦點，從而解決input不失焦的問題：
在這里對於普通的div/span等元素節點是不能直接獲取焦點的，需要用到一個屬性tabindex
2、關於tabindex的科普
如果試圖觸發div標簽綁定的onfocus事件和onblur事件，需要為該標簽添加tabindex屬性。
tabindex屬性其實指定了點擊計算機“Tab”鍵時光標移動的順序，在點擊計算機“Tab”鍵時tabindex屬性值越小（最小為0）其所在的標簽越先得到焦點
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>04</title> </head> <body> <input type="text" id="text1"> <input type="text" id="text2"> <input type="text" id="text3"> <div>按鈕</div> </body> </html>
運行上面的代碼點擊計算機“Tab”鍵，這是你會發現input控件獲取了焦點；input控件可以直接觸發onfocus事件和onblur事件，但div不行
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <input type="text" id="text1" tabindex = "3"> <input type="text" id="text2" tabindex = "2"> <input type="text" id="text3" tabindex = "1"> </body> </html>
運行上面的代碼點擊計算機“Tab”鍵，input會從右到左依次獲取焦點
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <input type="text" id="text1" tabindex = "1"> <input type="text" id="text2" tabindex = "2"> <input type="text" id="text3" tabindex = "3"> </body> </html>
運行上面的代碼點擊計算機“Tab”鍵，input會從左到右依次獲取焦點
tabindex默認的會使用在以下元素（就是說默認可以獲取焦點的元素）：A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.這些元素不設置tabindex都可以獲取焦點，其他元素需要設置tabindex才能獲取到焦點，其中tabindex得知越小在tab鍵切換的時候就會首先聚焦
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>04</title> </head> <body> <input type="text" id="text1"> <input type="text" id="text2"> <input type="text" id="text3"> <div tabindex="0">按鈕</div> </body> </html>
運行上面的代碼div就會獲取焦點，當開始的時候焦點在input里面輸入的時候，當點擊div，原input就會失焦而div也就獲取到了焦點，問題自然就解決了