div实现绑定按键事件
来源:互联网 发布:成都java培训费用多少 编辑:程序博客网 时间:2024/06/08 10:56
问题背景
所有的页面都会引用一个公共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"后边框消失。
阅读全文
0 0
- div实现绑定按键事件
- div与table事件绑定
- Unity3D之UI按键绑定事件(一)
- Unity3D之UI按键绑定事件(二)
- Unity3D之UI按键绑定事件(三)
- Unity3D之UI按键绑定事件(四)
- Unity3D之UI按键绑定事件(六)
- Unity3D之UI按键绑定事件(五)
- 自定义Dialog,实现按键事件
- Jquery给HTML元素绑定按键事件-回车事件
- Jquery给HTML元素绑定按键事件-回车事件
- input事件--->按键事件的基本实现
- 用js给div绑定事件,实现点击切换效果的几种方式总结
- python对绑定事件的鼠标、按键的判断
- Unity3D之UI按键绑定事件案例(七)
- react 实现双向绑定以及事件绑定
- lwuit 下按键事件的实现
- C语言实现模拟键盘按键事件
- fortan笔记
- json-c_0_12使用说明
- web开发快速提高工作效率的一些资源
- 注册页面数据校验(JS基本语法)
- 上传图片预览JS脚本 Input file图片预览的实现示例
- div实现绑定按键事件
- iOS视频边下边播–缓存数据流(备用知识点)
- css持续旋转
- 257. Binary Tree Paths
- spark自定义分区
- RxJava学习资料整理
- 各种功能的开源项目
- 关于12/24时间制的一些代码
- Android RxJava2+Retrofit2搭建网络请求框架