在按鍵上按下按鍵（按下按鍵後），跳轉到奇怪行爲

我正在重構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

非常感謝。 –

在按鍵上按下按鍵（按下按鍵後），跳轉到奇怪行爲

回答

相關問題