专栏首页工作笔记精华div实现绑定按键事件 转

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({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • java对象拷贝最完全解说 转

    java赋值是复制对象引用,如果我们想要得到一个对象的副本,使用赋值操作是无法达到目的的:

    stys35
  • js怎么动态加载js文件(JavaScript性能优化篇)转

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度

    stys35
  • Redis实现分布式锁3-使用LUA脚本实现分布式锁,解决原子性问题

    stys35
  • 计算机程序的思维逻辑 (5) - 小数计算为什么会出错?

    违反直觉的事实 计算机之所以叫"计算"机就是因为发明它主要是用来计算的,"计算"当然是它的特长,在大家的印象中,计算一定是非常准确的。但实际上,即使在一些非常...

    swiftma
  • 装逼神器!五分钟用Python生成超NICE的二维码

    这个就是一个二维码加上一个静态的图片。(中间的图片是我自己的公众号【机器学习炼丹术】的logo)。

    机器学习炼丹术
  • cython初体验

    笔者最近参与了一个项目,其目的是提升一个python程序的运行速度。其中一个手段就是利用cython来优化原来的python代码。笔者之前没有接触过cython...

    一只羊
  • 更骚的create-react-app开发环境配置craco

    使用 CRA 脚手架创建的项目,如果想要修改编译配置,通常可能会选择 npm run eject 弹出配置后魔改。但是,eject 是不可逆操作,弹出配置后,你...

    Run丘比特
  • 百度原CFO李昕晢转任百度资本CEO,接班人还在寻找中

    镁客网
  • Code::Blocks Win安装

    云深无际
  • CRM product UI里assignment block的显示隐藏逻辑

    我们在product overview page里能看到很多的assignment block。但是runtime的时候真正显示出来的内容只是configura...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券