在按键上按下按键（按下按键后），跳转到奇怪行为

我正在重构JS30 Challange＃1。当按下键时，脚本将一个类添加到具有小变换的元素中。我想从一个元素中删除类时过渡结束，我做了这个：在按键上按下按键（按下按键后），跳转到奇怪行为

const KEYS = document.querySelectorAll('.audiobox'); 
KEYS.forEach(KEY => KEY.addEventListener('transitionend', function() { 
    KEY.classList.remove('playing'); 
}), false);

此代码的工作很好，但我想通过调用函数removeTransition清理这一点。

function removeTransition(e) { 
    if (e.propertyName !== 'transform') return; 
    e.target.classList.remove('playing'); 
} 

const KEYS = document.querySelectorAll('.audiobox'); 
KEYS.forEach(KEY => KEY.addEventListener('transitionend', removeTransition));

当我按下一个键脚本，它的工作，类过渡时结束，但问题是，当我拿着几秒钟类永远不会被删除的关键去除。正如我所提到的，即使我拿着钥匙，第一种解决方案也能很好地工作，第二种解决方案没有完全正常工作，您能告诉我为什么吗？

这里是整个脚本

(function() { 
    "use strict"; 

    function removeTransition(e) { 
    if (e.propertyName !== 'transform') return; 
    e.target.classList.remove('playing'); 
    } 

    function playAudio(e) { 
    let key_code; 
    if (e.type === 'keydown') key_code = e.keyCode; 
    if (e.type === 'click') key_code = e.target.getAttribute('data-key'); 
    const KEY = document.querySelector('.audiobox[data-key="' + key_code + '"]'); 
    const AUDIO = document.querySelector('audio[data-key="' + key_code + '"]'); 

    if (!AUDIO) return; 

    AUDIO.currentTime = 0; 
    AUDIO.play(); 
    KEY.classList.add('playing'); 

    const KEYS = document.querySelectorAll('.audiobox'); 
    KEYS.forEach(KEY => KEY.addEventListener('transitionend', removeTransition)); 

    // This one is working 
    // KEYS.forEach(KEY => KEY.addEventListener('transitionend', function() { 
    // KEY.classList.remove('playing'); 
    // }), false); 
    } 

    window.addEventListener('keydown', playAudio); 
    const BOXES = document.querySelectorAll('.audiobox'); 
    BOXES.forEach(BOX => BOX.addEventListener('click', playAudio)); 
})();

来源

2017-05-05 Krystian Kupiec

，能得到任何错误，当您在控制台中选择第二种方法，也可以共享html /工作代码片段 – Santosh

控制台中没有错误。你可以在这里查看任务的现场版本http://fdev.pw/learnjs/js30/01/ –

你为什么要检查'if（e.propertyName！=='transform'）return;'在函数内部，但不是在使用其他代码时。正因为如此，如果propertyName是box-shadow或其他变换，它将返回 – Santosh

正如在评论中讨论，

删除检查if (e.propertyName !== 'transform') return;的removeTransition函数内部

function removeTransition(e) { 
// if (e.propertyName !== 'transform') return; 
    e.target.classList.remove('playing'); 
    }

Working code snippet

来源

2017-05-05 01:58:50 Santosh

非常感谢。 –

在按键上按下按键（按下按键后），跳转到奇怪行为

回答

相关问题