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"后边框消失。