當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
原生JS【fiveKeyPress】2秒内五次点击键盘任意键(或组合键)触发自定义事件(以Pause/Break键为例)
生活随笔
收集整理的這篇文章主要介紹了
原生JS【fiveKeyPress】2秒内五次点击键盘任意键(或组合键)触发自定义事件(以Pause/Break键为例)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
看文章之前來一個熱身吧[JavaScript鍵碼表]身為一個鍵盤俠,不搞清楚鍵碼映射表怎么可以???_你摯愛的強哥(http://www.shuzhiqiang.com)-CSDN博客keycode 0 =keycode 1 =keycode 2 =keycode 3 =keycode 4 =keycode 5 =keycode 6 =keycode 7 =keycode 8 = BackSpacekeycode 9 = Tabkeycode 10 =keycode 11 =keycode 12 = Clearkeycode 13 = Enterkeycode 14 =keycode 15 =keycode 16 = Shift_Lkeycode 17.https://blog.csdn.net/qq_37860634/article/details/120446294
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"> </head> <body> </body> <script>let multiKeyPress = {keyPressTimes: 0,// 2秒內5連擊(默認)________________________trigger(multiKeyPressCallback,singleClickCallback,maxTimes = 5,time = 2000) {this.keyPressTimes || (this.keyPressTimes = 0);++this.keyPressTimes >= maxTimes &&(multiKeyPressCallback && multiKeyPressCallback(),singleClickCallback || (this.keyPressTimes = 0));this.keyPressTimes === 1 &&setTimeout(() => {this.keyPressTimes < maxTimes &&singleClickCallback &&singleClickCallback(); //執行單擊鍵盤or少于maxTimes次數的點擊this.keyPressTimes = 0;}, time);}};/*設置快捷鍵*/onkeyup = e => {if (e.key === 'Pause') {/*按下Pause/Break鍵時候執行*/multiKeyPress.trigger(() => {// 雙擊鍵盤alert(`【更新時間】${versionTime}\n(注意校對是否已發布最新代碼)`);},() => {// 單擊鍵盤console.count();console.log("單擊Pause/Break鍵");}, 2, 300);}};let versionTime='2021年01月01日 00:00:00'; </script> </html>總結
以上是生活随笔為你收集整理的原生JS【fiveKeyPress】2秒内五次点击键盘任意键(或组合键)触发自定义事件(以Pause/Break键为例)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 腾讯阿里的螺丝钉,一样会生锈!
- 下一篇: 跟风“涨价”,品牌老化,为何“0糖”的奥