div實現綁定按鍵事件

問題背景

全部的頁面都會引用一個公共js代碼庫base.js，在這個代碼庫裏爲document綁定了按鍵事件，如今須要爲某個特殊的custom.html頁面定製事件handler。

解決思路

1. 做爲js小白，首先想到的是在custom.html裏從新爲按鍵綁定一個customHandler來覆蓋原來的handler

$(document).keypress(customHandler);

測試的時候發現js並不會覆蓋，會先執行customHandler，再執行handler；

2. 找資料發現了一個event.stopPropagation()能夠中止事件傳播，寫進去發現不起做用，找到官方對這個函數的說明發現這個函數只能阻止元素的事件向上層元素傳播，因爲這兩個處理器都綁定在document上，沒有上下級關係，因此沒起做用。

3. 那就製造上下級關係，把customHandler綁定在custom.html裏的一個div元素上

$(「#divId」).bind("keypress",customHandler);

測試發現監聽不到按鍵事件，由於div元素無法獲取焦點，但只要爲div元素加上tabIndex屬性就能獲取焦點

<div id="divId" tabIndex=-1></div>

4. 測試發現div裏面的內容外面多了一個邊框，很是難看，加上style="outline:none"後邊框消失。