JavaScript mousedown 仅在第二次单击时有效

Question

我希望按钮在单击时更改其颜色(鼠标按下时颜色较深，鼠标松开时原始颜色)并且它可以工作，但仅在第二次单击时有效。这是为什么？我该如何解决这个问题？

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

我还尝试创建一个处理 mousedown 和 mouseup 的函数。它有相同的结果。

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

这是 fiddle :https://jsfiddle.net/Lj8kyr7e/

Answer 1

mouseup 和 mousedown 事件在 click 事件处理程序中注册。因此，第一次单击按钮时，这两个事件尚未设置。

您需要在点击处理函数之外添加这些事件。例如。 https://jsfiddle.net/Lj8kyr7e/6/