首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用JS监听键盘事件

事件说明 我们将键盘事件的所有属性和方法打印出来(这里以1为例) document.onkeydown = function(event){ console.log(event)...; }  这里面有几个需要注意的属性 key:按键的名称 keyCode:按键的键码 altKey、ctrlKey、shiftKey:当组合(如ctrl+c)时,ctrlKey会变为...console.log(":"+event.key+"键:"+event.keyCode); } 下任意按键后的效果: 二、监听回车事件 这里以回车键(键码为13)为例 ,如果需要监听不同的按键...("下了回车键") } } 三、监听组合键 这里以CTRL+A为例 altKey:Alt+*组合键时为true ctrlKey:Ctrl+*组合键时为true shiftKey:...7 103 / 111 功能键键码值 按键 键码 按键 键码 F1 112 F7 118 F2 113 F8 119 F3 114 F9 120 F4 115 F10 121 F5 116 F11

10.9K10
您找到你想要的搜索结果了吗?
是的
没有找到

双击事件(dblclick)时,不触发鼠标(mousedown) 动作事件

在一个dom节点的事件绑定中,如果同时绑定了dblclick和mousedown那么想要执行双击事件(dblclick)时能就会触发两次mousedown事件。...在单击的时候(也就是鼠标的时候)不会执行双击,但是双击的时候会执行两次单击再执行双击事件。 解决的思路:要想双击时不执行单击事件,就使用定时器清除掉两个单击事件,留下一个双击事件。...item)"> handleMousedown(event, node, index) { clearTimeout(this.timeOut); // 清除第一个鼠标单击事件...handleDblclick(event, item) { clearTimeout(this.timeOut) console.log(event.target, 'handleDblclick'); }, 关于实现原理...在setTimeout 中的 time=200,大家知道js事件循环机制,点击事件会添加一个任务队列。

40420

【Android 事件分发】MotionEvent.ACTION_DOWN 事件分发流程( Activity | ViewGroup | View )

事件分发源码分析 ( ViewGroup 事件传递机制 一 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 二 ) 【Android 事件分发】事件分发源码分析...( ViewGroup 事件传递机制 三 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 四 | View 事件传递机制 ) 【Android 事件分发】事件分发源码分析...】ItemTouchHelper 实现侧滑删除 ( 设置滑动方向 | 启用滑动操作 | 滑动距离判定 | 滑动速度判定 | 设置动画时间 | 设置侧滑触发操作 ) 【Android 事件分发】ItemTouchHelper...实现拖动排序 ( 设置滑动方向 | 启启用长按拖动功能 | 拖动距离判定 | 设置拖动触发操作 ) 【Android 事件分发】ItemTouchHelper 事件分发源码分析 ( 绑定 RecyclerView...源码分析 ( OnItemTouchListener 事件监听器源码分析 二 ) 【Android 事件分发】MotionEvent.ACTION_DOWN 事件分发流程( Activity |

1.6K20

JS-事件之鼠标、键盘都能控制的下拉选框效果

event.cancelBubble = true; };//以上是阻止冒泡的判断语句 menu.style.display = "block"; //添加键盘事件...)和addEventListener(通用浏览器中添加事件监听器)。...二、 展开菜单之后,在document对象上绑定keyup事件,(键盘事件不是某个具体的对象了,所以要帮到document上面来)向下方向键,选中下一个选项,向上方向键,选中上一个选项,下回车键菜单收起...,显示选中项 提示: 1、 声明一个全局的index变量初值为-1 2、 向下方向键时index递增,当递增至大于等于菜单选项的总数时恢复为0 3、 向上方向键时判断index,如若小于等于0则设为菜单选项的总数...,下回车键不做任何操作 三、鼠标滑过每个选项时高亮显示,离开时去掉背景,点击高亮选项时菜单标题改变 提示: 1.遍历所有a标签,绑定鼠标点击的事件 注意:要考虑到浏览器兼容,使用innerHTML

3.2K50

JS】310- 使用 focusout 事件,解决 iOS 键盘收起不归位问题

当用户在手机上输入联系电话时,IPhone键盘会弹出,此时iphone上为了让用户可以看到电话输入框,会将整个页面整体向上移动(不然键盘会遮住电话输入框)。...键盘收起时页面无法还原归位 然而当用户输入完成关闭键盘后,键盘虽然收起了,但页面位置却不会还原。 问题分析: 实际上这是由于 iOS 无法在键盘收起时,页面滚出视口的部分没有掉下来导致的。...要解决这个问题,我们可以在用户光标离开输入框的时候,调用 window.scrollTo(0, 0) 来把页面滚动到跟视口顶部对齐,从而实现页面归位的效果。... 然后,实现我们的事件处理器...这样的话,在 blur 时会触发我们的 window.scrollTo(0,0) 导致页面往下滚一,接着 姓名输入框 聚焦,于是键盘继续弹起---这导致页面再次向上移动。

3.2K10

vue.js实现阻止事件冒泡

当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行 .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 onScroll 完成。...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。

5.9K10
领券