我在使用VueDraggableResizable制作一个窗口，然后需要点击esc关闭窗口。

但是键盘事件没有生效，写任何位置都不行。

解决方案

  1. 在需要触发esc事件的div或其他上给出 tabindex 属性，属性值写啥不重要。tabindex可以使元素获取焦点，而键盘事件触发需要焦点。
  2. 如果是其他库的组件，注意检查@keydown.esc.native，触发原生事件，而不是其他库emit的事件
  3. keypress事件不要使用，从现代浏览器开始，keypress 已被废弃，不建议再使用。替代方案是 keydown 和 keyup。

Vue 组件里添加键盘事件 keydown keyup不生效问题的更多相关文章

  1. webpack单独构建scss文件与.vue组件里构建scss的一个坑

    在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './a ...

  2. 键盘事件keydown、keypress、keyup随笔整理总结（摘抄）

    原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...

  3. 详解键盘事件(keydown，keypress，keyup)

    一.键盘事件基础 1.定义 keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) keyup:释放键盘键 顺序为:keydown -> keypre ...

  4. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. vue组件中—bus总线事件回调函数多次执行的问题

    在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...

  6. vue 组件中添加样式不生效

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v ...

  7. Vue中监听 键盘事件及修饰符

    键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F24 8            ...

  8. 键盘事件keydown、keypress、keyup随笔整理总结

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  9. 键盘事件keydown、keypress、keyup

    事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发k ...

  10. 无线端不响应键盘事件(keydown,keypress,keyup)

    今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...

随机推荐

  1. BigDecimal数据处理方法总结

    前言 ‌BigDecimal是Java编程语言中位于java.math包中的一个类,主要用于进行高精度的十进制数计算‌.它提供了对任意精度的十进制数进行精确计算的能力,适用于需要保持精度和执行准确计算 ...

  2. three.js优化

    Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用. three.js 性能优化方面,整理一下常用的优化方法或者方向,供大家一个优化思考的方向 尽量重用Material和G ...

  3. 切换Docker本地目录

    背景: df -h,发现docker默认的路径在/var/lib下,而且容量即将满掉. 对于欧拉系统来说,目录在/home,需要把docker目前的目录切换到/home下. 解决方法: 1. Dock ...

  4. 1.mysql部署文档

    部署方式 1.docker上面部署 ● 部署最新版本 docker pull mysql:latest # 拉取最新版本的镜像文件 docker images # 查看已经安装的镜像文件 docker ...

  5. 带宽计算-大B和小B的区别

    在计算机网络.IDC机房中,其宽带速率的单位用bps(或b/s)表示:换算关系为:1Byte=8bit 1B=8b    ---- 1B/s=8b/s(或1Bps=8bps) 1KB=1024B    ...

  6. mongodb和spring集成中MongoTemplate的总结是使用方法

    基础实体类@Document(collection="person") class Person{ String id; String name; int age; public ...

  7. Qt/C++离线读取全国任意经纬度高程海拔值/无任何依赖/纯原创代码解析

    一.前言说明 做地图开发会遇到一个常规需求,就是获取当前经纬度对应的海拔高度,也叫做高程值,很遗憾各大地图厂商都未提供接口获取,可能是有明文规定,不能地图中提供对应的海拔高度值,于是需要另想他法,尽管 ...

  8. 鸿蒙OS创新实践：动态声控话筒开发指南

    前言 在鸿蒙OS的生态中,开发者们不断探索和创新,以期为用户带来更丰富的交互体验.最近,我萌生了一个想法:制作一个能够随着声音动态变化的话筒组件.尽管网络上缺乏现成的参考案例,但我决定亲自动手,将这一 ...

  9. vue 路由警告 Duplicate named routes definition

    今天在开发的时候,项目报了一个警告  Duplicate named routes definition ,这里记录一下解决方式和思路. 警告产生的原因根据提示内容,我们大概猜测是和路由的name有关 ...

  10. Datawhale AI 夏令营-天池Better Synth多模态大模型数据合成挑战赛-task3持续上分(更新中)

    在大数据.大模型时代,随着大模型发展,互联网数据渐尽且需大量处理标注,为新模型训练高效合成优质数据成为新兴问题."天池 Better Synth - 多模态大模型数据合成挑战赛"应 ...