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

(adsbygoogle = window.adsbygoogle || []).push({});