通过（ESC）键关闭面板中的幻灯片叠加模式

Question

如何向以下JavaScript代码添加（ESC）键“关闭”功能。

[当前，用户只有在单击或轻击X图标或单击或轻击覆盖（非面板主体）部分时，才能关闭打开的面板显示。

*试图使此滑入式面板对键盘用户完全兼容。

(function(){
    var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
    if( panelTriggers.length > 0 ) {
        for(var i = 0; i < panelTriggers.length; i++) {
            (function(i){
                var panelClass = 'js-cd-panel-'+panelTriggers[i].getAttribute('data-panel'),
                    panel = document.getElementsByClassName(panelClass)[0];
                panelTriggers[i].addEventListener('click', function(event){
                    event.preventDefault();
                    addClass(panel, 'cd-panel--is-visible');
                });
                panel.addEventListener('click', function(event){
                    if( hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
                        event.preventDefault();
                        removeClass(panel, 'cd-panel--is-visible');
                    }
                });
            })(i);
        }
    }

    function hasClass(el, className) {
        if (el.classList) return el.classList.contains(className);
        else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
    }
    function addClass(el, className) {
        if (el.classList) el.classList.add(className);
        else if (!hasClass(el, className)) el.className += " " + className;
    }
    function removeClass(el, className) {
        if (el.classList) el.classList.remove(className);
        else if (hasClass(el, className)) {
            var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
            el.className=el.className.replace(reg, ' ');
        }
    }
})();

*类名js-cd-panel-trigger附加在我的触发按钮上。

我将由codyhouse.co构建的源代码注入到这支笔中：https://codepen.io/CaliforniaGent/pen/eYNGgdN

感谢您愿意提供帮助。。加油！

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

这里是基本概念：

window.addEventListener('keyup', e => {
  if (e.key === 'Escape') {
    console.log('You pressed the escape key!');
  }
});