JavaScript mousedown работает только при втором щелчке

Я хочу, чтобы кнопки меняли свой цвет при нажатии (более темный оттенок при наведении мыши и их исходный цвет при наведении мыши), и это работает, но только при втором щелчке. Это почему? И как я могу это исправить?

Идентификаторы кнопок от 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];
  };
};

Вот скрипка: https://jsfiddle.net/Lj8kyr7e/


javascript onmousedown
person Keels    schedule 16.05.2016    source источник
comment
Чтобы избежать всего этого, рассматривали ли вы просто стиль кнопок, используя их псевдокласс :active? Состояние :active будет добавлено для вас при нажатии мыши?   -  person Eric N    schedule 16.05.2016
comment
Я только что попробовал это, и это работает. Большое спасибо! Лучше ли это сделать, потому что это делает мой код излишне сложным?   -  person Keels    schedule 16.05.2016
comment
потому что вы добавляете их в первый клик? И каждый щелчок после этого вы добавляете все больше и больше событий...   -  person epascarello    schedule 16.05.2016
comment
Как правило, вам нужно обрабатывать как можно больше стилей в вашем css. Пусть браузер сделает тяжелую работу, которая в данном случае является логикой применения эффектов при нажатии кнопки мыши.   -  person Eric N    schedule 16.05.2016
comment
Хороший призыв к использованию CSS для этого. В качестве общего совета вы всегда должны использовать самое простое возможное решение (которое вы знаете). И в этом случае используются псевдоэлементы CSS.   -  person coolnalu    schedule 16.05.2016
comment
Отличный совет! Спасибо!   -  person Keels    schedule 16.05.2016

Ответы (1)


arrow_upward
1
arrow_downward

События mouseup и mousedown регистрируются внутри обработчика событий click. Таким образом, при первом нажатии кнопки два события еще не настроены.

Вам нужно добавить эти события вне функции обработки кликов. Например. https://jsfiddle.net/Lj8kyr7e/6/

person coolnalu    schedule 16.05.2016
comment
Спасибо большое Coolnalu! - person Keels; 16.05.2016