使用（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

这里是为退出键添加事件的非常基本的示例。您可能想研究更多有关检测事件中按下了什么键的信息（现在我正在使用e.key），但是还有其他方法可以完成此操作，具体取决于您希望浏览器支持的功能。

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!');
  }
});

由于这是JavaScript文件，因此我无法运行您的代码，因此我仅复制/粘贴了您当前的click事件监听器。这是相同的想法，但是您想改为为keyup添加一个侦听器。然后，您想询问event.key仅在所按下的键为Escape

时才能继续

(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');
          }
        });
        // Close Dialog on Escape Click
        panel.addEventListener('keyup', function(event) {
          if (event.key === 'Escape') {
            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, ' ');
    }
  }
})();