JavaScript mousedownは2回目のクリックでのみ動作します

Question

ボタンがクリックされたときにボタンの色を変更したいのですが（マウスの暗い影とマウスの元の色）、2回目のクリックでのみ機能します。何故ですか？そして私はこれをどのように修正できますか？私はまた、マウスダウンとのmouseupを処理する関数を作成しようとしました

document.getElementById('main').addEventListener('click', function(e) { 

var buttonNum = e.target.id.substring(6); 

if (e.target.id.substring(0,6) === "button") { 
    e.target.addEventListener('mousedown', function() {mouseDown(buttonNum)}, false); 
    e.target.addEventListener('mouseup', function() {mouseUp(buttonNum)}, false); 
    // trying another way: 
    // mouseEventHandler(buttonNum); 
    result.innerHTML = e.target.innerHTML + " was clicked"; 
} 

}, false); 

var mouseupColors = ["#CE3737", 
            "#48935C", 
            "#FFD454", 
            "#26567C", 
            "#FF6528", 
            "#92898A", 
            "#AF9FA5", 
            "#9EA9AA", 
            "#989788", 
            "#7C7372"] 

var mousedownColors = ["#B52D2D", 
             "#397A4A", 
             "#E5BF4B", 
             "#183F63", 
             "#E55B24", 
             "#777071", 
             "#96888D", 
             "#879091", 
             "#7F7E71", 
             "#635C5B"] 

function mouseDown(buttonNum) { 
    var buttonId = "button" + buttonNum; 
    document.getElementById(buttonId).style.backgroundColor =   mousedownColors[buttonNum - 1]; 
} 

function mouseUp(buttonNum) { 
    var buttonId = "button" + buttonNum; 
    document.getElementById(buttonId).style.backgroundColor = mouseupColors[buttonNum - 1]; 
} 

ボタンのIDは（...ボタン1、ボタン2）1〜10です。それは同じ結果を持っています。ここで

var mouseEventHandler = function(buttonNum) { 
    var buttonId = "button" + buttonNum; 
    document.getElementById(buttonId).onmousedown = function() { 
    this.style.backgroundColor = mousedownColors[buttonNum - 1]; 
    }; 
    document.getElementById(buttonId).onmouseup = function() { 
    this.style.backgroundColor = mouseupColors[buttonNum - 1]; 
    }; 
}; 

はフィドルです：https://jsfiddle.net/Lj8kyr7e/

Answer 1

mouseupとmousedownイベントがclickイベントハンドラ内で登録されています。最初にボタンをクリックすると、2つのイベントはまだ設定されていません。

クリック処理機能以外のイベントを追加する必要があります。例えば。 https://jsfiddle.net/Lj8kyr7e/6/