原生js实现【longPressKey】长按键盘任意键（或组合键）3秒触发自定义事件（以Pause/Break键为例）-阿里云开发者社区

原生js实现【longPressKey】长按键盘任意键（或组合键）3秒触发自定义事件（以Pause/Break键为例）

2024-04-08 114

版权

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

简介： 原生js实现【longPressKey】长按键盘任意键（或组合键）3秒触发自定义事件（以Pause/Break键为例）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
<script>
 
let longPressKey = {
timeout: null,
trigger(
    pressedEndCallback, //长按结束触发方法
    pressedStartCallback, //按下触发方法
    pressedUpCallback, //弹起触发方法
    key = 'Pause', //长按什么键
    delaySecond = 3 //长按多少秒触发
) {
    onkeydown = (e) => {
    let k = e.keyCode || e.which || e.charCode,
        ck = e.ctrlKey || e.metaKey,
        ak = e.altKey,
        sk = e.shiftKey;
    if (e.key === key) {
        if (!this.timeout) {
        pressedStartCallback && pressedStartCallback(e);
        this.timeout = setTimeout(() => {
            this.timeout = null;
            pressedEndCallback && pressedEndCallback(e);
        }, 1000 * delaySecond);
        }
    }
    };
    onkeyup = (e) => {
    clearTimeout(this.timeout);
    this.timeout = null;
    pressedUpCallback && pressedUpCallback(e);
    };
},
};
 
//测试用例----------------------------------------
let versionTime = '2022年2月6日 17:43:12';
longPressKey.trigger(
(e) => {
    // 长按超时执行
    alert(`【更新时间】${versionTime}\n（注意校对是否已发布最新代码）`);
},
(e) => {
    // 刚刚按下键
    console.log("按键对象",e);
},
(e) => {
    // 弹起
    console.log("弹起键对象",e);
},
'Pause',
3
);
 
</script>
</html>

原生js实现【longPressKey】长按键盘任意键（或组合键）3秒触发自定义事件（以Pause/Break键为例）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

原生js实现【longPressKey】长按键盘任意键（或组合键）3秒触发自定义事件（以Pause/Break键为例）

热门文章

最新文章

相关课程

相关电子书

相关实验场景