核心提示:问题背景所有的页面都会引用一个公共js代码库base.js,在这个代码库里为document绑定了按键事件,现在需要为某个特殊的custom.html页面定制事件handler。解决思路1. 作为js...
问题背景
所有的页面都会引用一个公共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里的一个p元素上
$(“#pId”).bind("keypress",customHandler);
测试发现监听不到按键事件,因为p元素没法获取焦点,但只要为p元素加上tabIndex属性就能获取焦点
4. 测试发现p里面的内容外面多了一个边框,非常难看,加上style="outline:none"后边框消失。