开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

esc+js监听

ESC 键在 JavaScript 中通常用于监听键盘事件，特别是当需要实现如退出全屏、关闭模态窗口、取消操作等功能时。以下是关于如何使用 JavaScript 监听 ESC 键的基础概念、优势、应用场景以及示例代码。

基础概念

在 JavaScript 中，可以通过监听 keydown 或 keyup 事件来检测 ESC 键的按下。ESC 键的键码是 27。

优势

用户体验：允许用户通过键盘快速执行常见操作，提高网站或应用的易用性。
无障碍性：对于使用辅助技术的用户（如屏幕阅读器），键盘导航是必不可少的。
跨平台：键盘事件在所有主流浏览器和操作系统上都是一致的。

应用场景

退出全屏模式：当用户进入全屏模式时，监听 ESC 键可以让他们快速退出。
关闭模态窗口：在显示模态窗口（如弹出框、对话框）时，监听 ESC 键可以让用户无需点击关闭按钮即可关闭窗口。
取消操作：在执行某些需要用户确认的操作时，监听 ESC 键可以提供取消操作的快捷方式。

示例代码

以下是一个简单的示例，展示如何使用 JavaScript 监听 ESC 键来关闭一个模态窗口：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESC Key Listener Example</title>
<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>

<button id="openModalBtn">Open Modal</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Some text in the Modal..</p>
  </div>
</div>

<script>
  const modal = document.getElementById("myModal");
  const openModalBtn = document.getElementById("openModalBtn");

  openModalBtn.onclick = function() {
    modal.style.display = "block";
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  document.onkeydown = function(event) {
    if (event.keyCode === 27) { // ESC key
      modal.style.display = "none";
    }
  }
</script>

</body>
</html>

在这个示例中，当用户点击“Open Modal”按钮时，会显示一个模态窗口。用户可以通过点击窗口外部或按下 ESC 键来关闭该窗口。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js监听模式模拟事件监听

function Handle(){ this.events={}; this.addEventListener=functio...

19.4K3 0

服务监听

Linux 服务监听 w: 显示目前登入系统的用户信息，执行这项指令可得知目前登入系统的用户有哪些人，以及他们正在执行的程序。 whereis 用来查看指定命令所在的文件夹。...netstat:用来监听网络连接状态。参数: -a 显示所有socket，包括正在监听的。 -n 以网络IP地址代替名称，显示出网络连接情形。

1.1K3 0

【Java GUI编程】002-AWT学习笔记（二）：事件监听、输入框事件监听、画笔、鼠标监听、窗口监听、键盘监听

一、事件监听 1、事件监听当某件事发生时，做些什么； 2、按钮点击监听代码演示： package com.zibo.lession02; import java.awt.*; import java.awt.event.ActionEvent...public void actionPerformed(ActionEvent e) { System.out.println("AAA"); } } 运行结果： 3、两个按钮共用一个监听事件...{ System.out.println("按钮被点击了，ActionCommand：" + e.getActionCommand()); } } 运行结果：二、输入框事件监听...setTitle(title); setBounds(300,300,500,500); setVisible(true); //鼠标监听事件...g.setColor(Color.RED); g.fillOval(point.x, point.y, 10, 10); } } } 运行结果：六、窗口监听

851 0

Android来电监听和去电监听

我觉得写文章就得写得有用一些的，必须要有自己的思想，关于来电去电监听将按照下面三个问题展开 1、监听来电去电有什么用？ 2、怎么监听，来电去电监听方式一样吗？ 3、实战，有什么需要特别注意地方？...一、监听来电去电能干什么 1、能够对监听到的电话做个标识，告诉用户这个电话是诈骗、推销、广告什么的 2、能够针对那些特殊的电话进行自动挂断，避免打扰到用户二、来电去电的监听方式（不一样的方式） 2.1...来去电监听方式一（PhoneStateListener）　　来电监听是使用PhoneStateListener类，使用方式是，将PhoneStateListener对象（一般是自己继承PhoneStateListener...（详细实现可以参考后面给出的拓展阅读部分）注册监听 private void registerPhoneStateListener() { CustomPhoneStateListener...Phone状态的监听机制

4.9K8 0

Android Glide加载图片、网络监听、设置资源监听

Glide加载图片、加载进度监听前言正文一、项目配置二、显示网络图片三、添加设置资源监听四、添加设置资源监听五、添加加载进度条六、封装工具类七、源码总结 ---- 前言在日常开发中使用...四、添加设置资源监听改动代码如下所示。...改动如下： /** * 显示网络Url图片附带加载网络监听和设置资源监听 * @param url 网络图片url * @param imageView 图片控件...* @param needNetListener 是否需要网络监听 * @param needResourceListener 是否需要设置资源监听 */ public static.../** * 显示网络Url图片附带加载网络监听和设置资源监听显示加载弹窗 * @param context 显示在哪个Activity/Fragment上 * @param

5.7K2 0

Proxy实现监听

10 }, arr: [1, 2, 3] } let handler = { get(target, key){ console.log('get', target, key); //懒监听...，去获取的时候才监听对象里面的对象，而不是直接递归循环监听 if(typeof target[key] === 'object' && target[key] !...handler) proxy.arr.push(4); proxy.msg.a = 50; proxy.msg.b = 60; proxy.c = 70; 相比较起来，defineProperty无法一次性监听所有属性...，必须遍历或者递归，而且无法监听新增的属性。

9182 0

SpringBoot事件监听

SpringApplication app = new SpringApplication(EventDemoApplication.class); //第一种方式添加监听事件...application.properties #第三种方式 context.listener.classes=com.boot.event.eventdemo.MyApplicationListener 使用第四种方式配置监听器的打印结果

3.4K0 0

bootstrap 滚动监听

DOCTYPE html> Bootstrap 实例 - 滚动监听（Scrollspy）插件</title

1.3K5 0

redis过期监听

前言今天写拼团功能，如果24小时后还没有人满，则此次拼团就失败了，那么这里我用redis过期监听来实现，键过期去处理订单状态等业务实现一、配置redis，开启redis过期监听修改...cacheDefaults(config) .build(); return cacheManager; } } 四、配置RedisListenerConfig实现监听...org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.data.redis.listener.RedisMessageListenerContainer; /** * 实现监听...); container.setConnectionFactory(connectionFactory); return container; } } 五、定义监听器...; import org.springframework.stereotype.Component; import javax.annotation.Resource; /** * redis过期监听器

2.3K2 1

事件监听机制

本篇文章我们就来聊一聊Java中的事件监听机制。在了解事件监听机制之前，我们先来学习一个设计模式——观察者模式，事件监听机制的原理就是它。...事件监听机制了解观察者模式之后，我们进入本篇文章的重心，事件监听机制。...在该模型中，有三个非常重要的概念：事件事件源事件监听器其具体流程是：用户操作（比如点击）导致事件触发，前提是事件监听器已经被注册好了，事件触发后会生成事件对象，此时事件对象会作为参数传递给事件监听器...，监听器调用对应的方法进行处理。...方法中会遍历所有的监听器，创建事件对象，并作为参数传入监听器的事件处理方法（triggerEvent）监听器的triggerEvent方法会调用事件的回调方法（callback）回调方法用于编写具体的处理逻辑

8.3K1 0

事件监听思考

也即一种方式是实现一个上下文，基于不同的事件码去实现对应的业务处理场景，此时可以基于监听，分不同的策略实现处理。...如果你看过dubbo3.0的源码的话，你会发现dubbo-config-spring模块，使用到了事件监听的方式执行发布和监听。...的场景防止重复触发：比如：ContextRefreshedEvent是上下文刷新事件，在初始化后执行的事件，当完成初始化后触发，从而执行监听...下面的代码是在Spring完成Bean的初始化后，经过上下文刷新事件后，执行的，同时可以根据监听对象的顺序依次进行触发。...那么我们能不能自己发布事件，然后自己去监听呢？答案当然是可以的。

2.1K2 0

input 事件监听

应此需要考虑兼容性问题，ie9以下的浏览器并没有实现这个事件， 3、propertychange事件，这个事件是在input的属性值发生改变时触发，而输入框的值就是input的value属性，应此可以用其来监听输入数据的改变

4.6K2 0

vue深度监听

放纵自己的欲望是最大的祸害；谈论别人的隐私是最大的罪恶；不知自己的过失是最大的病痛——亚里士多德我们有时使用vue的watch，可能要对一个对象的多个属性进行监听这样我们就可以使用深度监听...} }; }, watch: { formData: { handler: 'cutValue', deep: true } }, methods: { // 监听

4391 0

EditText的监听

因为想做一个类似微信发送按钮的功能，即输入框有内容时就是发送按钮，没内容时是其他附加的功能，所以查了一下edittext的监听事件。...具体代码如下 //设置文本变化的监听 ed.addTextChangedListener(watcher); private TextWatcher watcher = new TextWatcher(

1.1K5 0

iOS 监听键盘

百度所查到的键盘监听大部分用的是 UIKeyboardDidShowNotification//已经显示 UIKeyboardDidHideNotification//已经隐藏然后我自己去试一直觉得一些空间跟随键盘的移动是有时间间隔的

1.5K3 0

java 监听socket

版权声明：本文为博主原创文章，未经博主允许不得转载。 @Test public void run() throws IOExcep...

1.8K1 0

DOM监听练习

使用onchange事件实现下列功能：（1）选择下拉列表中不同的选项，页面中的div就设置成不同的背景颜色，div中的内容也发生变化。比如：选择黄色选项...

3471 0

像监听页面一样监听戈多的动态

它有以下三个方法： observe(target, options)：监听对象，接受两个参数，一个是监听的对象（target），一个是观察的选项(options)； disconnect()：断开监听的功能...options选项可选参数（以下属性可设置为true）： childList：监听目标子节点的变化； attributes：监听目标属性的变化； characterData：监听目标数据的变化； subtree...：监听目标以及其后代的变化； attributeOldValue：监听目标属性变化前的具体值； characterDataOldValue：监听目标数据变化前的具体值； attributeFilter：...如何监听戈多的位置？下面我们就通过实际的代码来监听戈多的位置变化。效果还是如同上图。...：监听元素与根元素的交叉区域信息； isIntersecting：判断监听元素是否与根元素相交，返回布尔值； intersectionRatio：监听元素的可见比例，即intersectionRect

1.7K2 0

addEventListener() 方法，事件监听

转载白杨-M http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法，事件监听你可以使用 removeEventListener...() 方法来移除事件的监听。

2.1K8 0

Java事件监听机制

再插一句有一段时间断更了，是在更新数据结构与算法专栏，有兴趣的可以去看一看，比较不错开始喽事件监听机制 Java中的事件监听机制是一种用于处理用户交互事件的机制。...事件监听机制的工作流程如下：定义事件源：事件源是触发事件的对象，它通常是一个类或接口。事件源需要提供注册和注销监听器的方法，并在适当的时候触发事件。...定义事件监听器接口：事件监听器接口定义了事件发生时要执行的方法。通常，事件监听器接口包含一个或多个事件处理方法。实现事件监听器：根据定义的事件监听器接口，实现具体的事件监听器类。...注册事件监听器：在事件源上调用注册方法，将事件监听器对象注册到事件源上。这样，事件源就知道要通知哪些监听器。...触发事件：当事件源发生事件时，它会遍历已注册的监听器列表，并调用每个监听器的事件处理方法。这样，每个监听器都可以根据具体的业务需求执行相应的操作。

2683 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭