如何用 TypeScript 代码区分一个 button 动作是由键盘还是鼠标触发的-阿里云开发者社区

开发者社区> -技术小能手-> 正文

如何用 TypeScript 代码区分一个 button 动作是由键盘还是鼠标触发的

简介: 如何用 TypeScript 代码区分一个 button 动作是由键盘还是鼠标触发的
+关注继续查看

如下图所示:这个 icon,既可以直接通过鼠标点击,又可以通过键盘 tab 键将 focus 移至其上,然后敲键盘回车键完成点击。

image.pngimage.png

在代码里,如何判断这两种情形?


image.png

通过 @HostListener 监听指令宿主元素即 button 元素的 keydown.enter 和 keydown.space 事件。如果发生,说明键盘被按下来了。

这里的事件类型为 KeyboardEvent.image.png

keydown.tab 和 keydown.shift.tab 说明 tab 键被按下。

image.png


如果是鼠标点击,事件名称为 click,对应的事件对象类型为 MouseEvent.

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一起谈.NET技术,提供第三种代码生成方式——通过自定义BuildProvider为ASP.NET提供代码生成
  之前写了一些关于代码生成的文章,提供了两种不同方式的代码生成解决方案,即CodeDOM+Custom Tool和T4。对于ASP.NET应用,你还有第三种选择——自定义BuildProvider。[文中涉及的源代码从这里下载] 目录 一、BuildProvider是什么? 二、将XML表示的消息转换成VB.
709 0
Android自定义字体样式Typeface的三种技术方案:Java代码的setTypeface和xml的fontFamily配置方式
Android自定义字体样式Typeface的三种技术方案:Java代码的setTypeface和xml的fontFamily配置方式 Android实现自定义的字体Typeface,正常情况下有两种情况:第一种:把字体ttf文件放到assets/fonts目录下,然后通过读取字体文件.
1924 0
jira webhook 事件触发并程序代码调用jenkins接口触发构建操作
要解决的问题 开发管理工具触发站点构建事件,事件处理中需要调用Jenkins接口开始构建动作。 我的应用场景: 使用jira作为管理工具,在jira中创建自定义的工作流来规定测试,上线,发布等流程,并通过自动化工具完成这一系列的操作。
1836 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12076 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13891 0
C#特性Attribute的“.NET研究”实际应用之:代码统计分析
  日常工作中,需要为程序集提供统计分析:   1:程序集方法数;   2:开发人员数目及各自所开发或REVIEW的方法数;   3:测试中,被标注有BUG的数目;   4:直接查看方法的IL代码;   鉴于以上统计的需要,特开发本EXE。
646 0
【钉钉搭】低代码模版系列——软件项目管理|一个表单的作用有多大?
钉钉搭低代码模版系列上线啦,首期为大家带来的是软件项目管理,这是一个适用IT企业软件项目管理的模版,可以实现从项目立项、到进度计划、任务安排、工时统计等一站式管理,跟踪任务进度,存储项目文档,即时讨论项目相关问题,实现IT企业研发项目全过程管理。
424 0
asp.net 服务器控件LinkButton等在后台代码中设置js事件或添加css样式
这个如果想在后台cs代码中控制不显示下划线,如下写法即可: this.Lk_AreaType.
772 0
1727
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载