解决浏览器默认阻止esc监听事件

最新推荐文章于 2024-06-18 14:09:15 发布
最新推荐文章于 2024-06-18 14:09:15 发布
阅读量1.4k 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhjnv/article/details/116519030
版权

在实现全屏时，想通过监听esc键来实现一些事件触发，却发现无法起作用，后来单独打印发现浏览器窗口内按下esc根本无法获取esc的KeyboardEvent，但是按下F12，F11等键却可以触发，在检查了KeyboardEvent对象后，猜测应该是esc被默认阻止了,
在这里插入图片描述
我们只需要设置下e.defaultPrevented=false;默认允许所有按键，即可实现监听。算是留作之后的一份经验。

我不止三岁
关注
专栏目录
屏蔽在页面中输入筐esc按键
吃掉大象的蚂蚁的专栏
07-16 2459
1.在开发网页的时候,我们要经常的用到文本输入框,但是在ie环境中，         如果用户在文本区域内输入了很多的信息，但是一不小心按下了esc键的话，         那么用户辛苦输入的东西就会没有，所以我们就要删除这个用户不友好的东西。         2.在考虑如何实现之前，我们要确定这样的漏洞在什么样的环境下出现。         经过测试，在IE 中普遍有这种现象，但是在FIREFO
指定元素全屏与退出全屏，Vue中处理监听esc并修改data数据（监听与作用域问题）
weixin_46037781的博客
11-05 1126
文章目录一、效果二、解决思路三、全屏与退出全屏 一、效果 解决的问题：vue本身监听不到全屏状态中的esc事件，导致无法修改这个按钮的样式icon和tooltip 未全屏时： 全屏时： 二、解决思路 一个重要方法：判断当前是否全屏 问题：如果vue本身的话，在esc事件时是不会调用这个方法的 /** 浏览器当前是否全屏 @return {*|boolean} */ export function isFullScreen() { return document.isFullScreen |
vue中监听ESC事件，全屏退出全屏
Jjacica的博客
03-06 1451
注意⚠️：这样的写法有缺点，如果你的全屏元素里面有表单，需要悬浮显示，将显示不出来；可以用另外的方法实现全屏（见 3），如果没有就用这块代码。3.另一种方法,是通过隐藏侧边栏顶部导航和其余的元素。1.在需要全屏的元素上绑定一个 ref,这里用。2.点击全屏按钮，绑定事件。
flash全屏模式下屏蔽ESC案件的方法
11-12
flash全屏模式下屏蔽ESC案件的例子，用在不需要退出画面的全面展示，防止用户ESC退出画面。
QDialog之屏蔽Esc键
weixin_33753845的博客
12-19 717
简述 Qt中Esc键会在一些控件中默认的进行一些事件的触发，比如：QDialog，按下Esc键窗口消失。大多数情况下，我们不需要这么做，那么就需要对默认事件进行屏蔽。 简述 源码分析 事件过滤器 事件重写 重写reject 源码分析 通过查看QDialog的源码，我们很容易会发现keyPressEvent事件中，当按...
swt中屏蔽系统默认的键盘事件ESC键。
zhou2003737的专栏
04-26 1670
<br />今天做swt的一个项目中发现在程序运行SplashHandler的时候如果用户按了esc键则程序停止，这时候桌面上面似乎就是剩下了一个图片。所以想办法的解决这个问题，不然用户只能够在任务栏或进程管理中结束程序。<br />我的思路是当用户按了esc的时候弹出一个对话框，问是否要关闭程序，如果选择是关闭程序，否则程序继续运行。<br />经过调试查找资料确认下面的代码是可以实现的。现贴出来和大家分享。package cr.planning.client.splashHandlers; imp
js设置长按esc退出全屏；拦截所有所有按键事件；全屏模式下拦截esc按键；javascript；chrome
yanxiaomu的博客
11-27 3715
转载请注明来源，谢谢 实现长按esc退出全屏，全屏模式下拦截esc按键事件 作者：theajack 浏览器的全屏api requestFullscreen 在全屏模式下会屏蔽掉对 esc 按键的监听，全屏模式下按 esc 只能是退出全屏。 使用 navigator.keyboard api 可以实现长按 esc 退出全屏，而使得我们的js代码可以拦截到esc按键事件 查看实例 | 实例源码 api使用如下，该api只在新版本chrome且是https模式（或localhost和本地文件）下可以，需要做兼容处
js获取键盘按键响应事件(兼容各浏览器)
10-27
此外，在编写事件处理代码时，还需要注意避免阻止默认的键盘事件行为，除非有明确的需要。可以通过event.preventDefault()方法来阻止默认行为，但这应当谨慎使用。 在实际应用中，根据需要对键盘事件作出响应时，...
Vue中监听事件的使用
qq_45938852的博客
12-22 2039
1、定义监听事件 使用v-on 或者 语法糖 @事件 来定义监听事件 如：v-on:click=“事件” or @click“事件“ 下面展示监听事件的基本使用 <body> <div id="app"> <h2>当前数值：{{center}}</h2> <button v-on:click="add">+</button> <!-- //语法糖 --> <butt
vue中设置全屏和退出全屏,esc和f11的按键事件的特殊处理
wangsiyisiyi的博客
05-20 5233
//mounted中 //本来想直接禁掉esc的键盘按下的默认行为的,但是浏览器会有个提示,并且百度看了众多解决方案,这个提示貌似不好去掉 // if (navigator.keyboard && navigator.keyboard.lock) { // // 禁用esc退出全屏 // navigator.keyboard.lock(['Escape']) // } else { // console.log('您的浏览器上不支持该功能
html5响应键盘事件,vue监听键盘事件的相关总结
weixin_29323273的博客
06-05 705
这篇文章主要介绍了vue监听键盘事件的相关总结，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下按键修饰符在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码...
屏蔽Enter或是Esc键
WUYUAN2011WOAINI的专栏
05-09 728
一般来说，对于一个默认情况下的对话框程序，用户在运行的时候，如果不小心按下了Enter或是Esc键，程序就会立刻退出。 因为：当用户按下Enter时， Windows就会自动寻找输入焦点（focus）落在哪一个按钮上（当前获得焦点的按钮即为当前选中的按钮，用Tab键可以来回切换，按钮四周将被点线包围）。 此时，即使对话框中没有OK按钮，OnOK()函数也会被调用，对于普通的对话框程序来说，On
html5全屏后，无法用keypress或keydown监听到Esc按键
hukay22的博客
03-04 966
浏览器默认不让监听Esc键 我们有需要在Esc按键后触发事件。代码如下 //监听窗口退出全屏解决无法监听Esc按键 window.onresize = function(){ if(!checkFull()){ //要执行的动作 $('#FullScreen').html('<i class="larry-icon larry-quanping">&#xe72f;</i>全屏'); } } function checkFu...
禁用/屏蔽 Chrome 默认快捷键
小单的博客专栏
06-18 3706
Chrome 有一些内置的快捷键，但是它并没有像其他软件一样提供管理快捷键的界面。在某些时候，当我们因为个人需求希望禁用 Chrome 某些快捷键时，又无从下手。1、打开 Chrome 应用商店，搜索插件名称 “Disable keyboard shortcuts”，并进行安装。好在有开发者开发了 Chrome 插件，可以禁用 Chrome 快捷键的插件，我们可以通过安装这个插件进行屏蔽设置。2、安装后在插件管理界面的 “键盘快捷键” 中找到我们安装的这个应用，然后对应设置需要屏蔽的快捷键即可。
使用谷歌 Chrome 浏览器禁用网页 JavaScript
Loup&卡普的博客
06-21 6842
Web 中 JavaScript 的主要功能为实现网页的动态，与用户的交互， HTML DOM 节点的增删修改等。在网页中插入新的 HTML 元素，修改现有的网页内容和样式响应用户的动作，响应鼠标的点击/移动、键盘的按键事件等向远程服务器发送网络请求，AJAX 请求，下载/上传文件等获取或修改 cookie，向访问者提出问题、发送消息等记住客户端的数据，记住密码等实现页面的效果更改，动画效果等这些功能保证了一个 Web 页面的正常运行。
html 基础， 禁止网页默认鼠标操作
sm_cod的博客
04-26 645
//禁止鼠标右键 οncοntextmenu=“return false;” //禁止鼠标拖动 οndragstart=“return false;” //文字禁止鼠标选中 onselectstart=“return false;” //禁止复制文本 οnselect=“document.selection.empty();” ...
e.preventdefault()别滥用
webot1的博客
09-18 228
有的时候我们会为事件回调函数添加一个参数（通常是e），并在函数中加入e.preventdefault()；由于习惯，我顺手将它写到了一个checkbox的change事件中。由于不同的浏览器解释不同，在IE8上出现了一个bug：change事件能进入，但是UI显示上不能讲复选框的选中状态重绘。分析原因，是我的e.preventdefault()阻止了状态重绘。checkbox 、radio的状态变化(并非所有浏览器)。
jquery判断上|下|左|右滑动
QUX轻博客
05-08 475
如何在手机端检测用户上下左右滑动事件？以下为jquery代码： $("#wrapper").on("touchstart", function(e) { ...
【前端学习日记】Vue中的鼠标事件和键盘事件
qq_54207312的博客
05-07 3225
Vue提供了很好用的模板语法，包括插值语法 {{ }} 和指令语法v-？。使用指令语法很容易就可以为文档对象添加事件。 比较常用到的事件就是鼠标事件和键盘事件了。当用户使用鼠标点击网页上的某个元素，或者使用键盘按下某个键，会执行对应的回调（callback），进而在短时间内产生动作。 比如给button标签添加一个click（点击）事件，使用插值语法的简写形式：@click=“showinformation”，即当鼠标点击时，执行showinformation这个函数。 接着在script结构的met
el-popover中阻止的默认键盘事件esc
最新发布
08-01
el-popover是Element UI库中的一个组件，它通常用于显示弹出内容，比如工具提示或者下拉菜单。当你想要在用户尝试关闭弹出窗口时阻止默认的Esc键操作，可以使用`@keydown.prevent="handleClose"`这样的指令来处理这个事件。 在这个例子中，`handleClose`是一个自定义方法，当用户按下Esc键时会被调用。通过添加`.prevent`修饰符，我们可以阻止浏览器默认的关闭行为，这通常意味着关闭弹出层的行为不会发生，除非你在`handleClose`方法中明确地实现了其他逻辑，比如确认是否关闭或者提供其他的关闭选项。 例如： ```html <el-popover placement="bottom" width="200" :visible.sync="showPopover" @keydown.prevent="handleClose"> <p>这是一个弹出层</p> </el-popover> <script> export default { methods: { handleClose(event) { if (event.key === 'Esc') { // 这里你可以选择不隐藏、确认后关闭或其他逻辑 this.showPopover = false; } }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我不止三岁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值