JavaScript mousedown僅適用於第二次點擊

我希望按鈕在點擊時改變它們的顏色（mousedown上的深色陰影和鼠標上的原始顏色），它只能在第二次點擊時使用。這是爲什麼？我該如何解決這個問題？JavaScript mousedown僅適用於第二次點擊

按鈕的id是從1到10（按鈕1，按鈕2 ...）

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]; 
}

我也嘗試創建處理鼠標按下和鼠標鬆開的功能。它有相同的結果。

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/

來源

2016-05-16 Keels

爲了避免這一切，你有沒有考慮過使用它們的活動僞類來設計按鈕的樣式？ The：active狀態會被添加到mousedown上嗎？ –

我剛剛嘗試過它，它確實有效。非常感謝！是否最好這樣做，因爲它使我的代碼不必要地複雜？ – Keels

，因爲你在第一次點擊時添加它們？然後每次點擊之後，您都會添加越來越多的事件... – epascarello

mouseup和mousedown事件註冊內click事件處理程序。所以當第一次點擊按鈕時，兩個事件還沒有設置。

您需要將這些事件添加到點擊處理函數之外。例如。 https://jsfiddle.net/Lj8kyr7e/6/

來源

2016-05-16 15:29:27 coolnalu

非常感謝Coolnalu！ – Keels

JavaScript mousedown僅適用於第二次點擊

回答

相關問題