добавление события щелчка к ключевому событию

1

Как сделать кнопку нажатой, независимо от того, как я запускаю событие? (либо с событием keydown, либо с событием клика). Я думал о добавлении "click()" к событию keydown, но он не работает

  • 0
    Что именно вы подразумеваете под этим не работает? Функция выполняется? Вы получаете какие-либо сообщения об ошибках на консоли? Пожалуйста, объясните немного, но больше, чтобы мы могли помочь вам :)
  • 0
    поэтому, когда вы нажимаете кнопку, звук воспроизводится, а когда вы нажимаете Enter, он также воспроизводится?
Показать ещё 6 комментариев
Теги:
addeventlistener

2 ответа

1
Лучший ответ

К сожалению, с помощью javascript невозможно запустить стили UserAgent и сделать кнопку "нажатой". Вам, вероятно, понадобится использовать css-решение, которое вы можете создать, чтобы выглядеть как кнопка по умолчанию, если вы действительно этого хотели.

Это означает, что вам нужно будет отслеживать события вниз и вверх по кнопкам, чтобы вы могли контролировать, в каком состоянии находится кнопка. У меня есть пример этого ниже.

const drumpad = [].slice.call(document.querySelectorAll('.drum-pad'));
    const displaytext = document.querySelector('#displaytext');

    const texts = ["Heater 1", "Heater 2", "Heater 3", "Heater 4", "Heater 6", "Open HH", "Kick N Hat", "Kick", "Closed HH"]; 
    const keycodes = [81, 87, 69, 65, 83, 68, 90, 88, 67];

    function downhandler(e) { 
      const index = e.type === 'keydown'?keycodes.indexOf(e.keyCode):drumpad.indexOf(this); 
      const target = drumpad[index]; 
      if (!target) return; 
      const audio = target.childNodes[0]; 
      audio.play(); 
      displaytext.textContent = texts[index]; 
      if(e.type === "mousedown"){
        //if we're a button (click case) use the event target
        e.target.classList.add('pressed');
      }else{
        //we need to find the button.
        const letter = String.fromCharCode(e.keyCode).toUpperCase();//get the uppercase key pressed
        const audio = document.getElementById(letter);//find the audio element with that id
        if(audio){
          const button = audio.parentNode;
          //and get it parent
          button.classList.add('pressed');//make it pressed
        }
      }
    } 
    function mouseuphandler(e) {
      //remove the pressed class from event target
      e.target.classList.remove('pressed');
    }
    function keyuphandler(e){
      const letter = String.fromCharCode(e.keyCode).toUpperCase();
      const button = document.getElementById(letter).parentNode;
      button.classList.remove('pressed');
    }
    drumpad.forEach(function(el) { 
      el.addEventListener('mousedown', downhandler);
      el.addEventListener('mouseup', mouseuphandler);
      el.addEventListener('mouseout', mouseuphandler);//needed incase the mouse is released after leaving the element
    }); 
    document.addEventListener("keydown", downhandler);
    document.addEventListener("keyup", keyuphandler);
button{
  background:#a0a0e0;
  border:1px solid #666;
  border-radius:2px;
  padding:5px;
}

button.pressed{
  background:#a0e0cb;
}
<!DOCTYPE html>
    <html>
    <head>
        <title>Drump pad</title>
        <link rel="stylesheet" type="text/css" href="drumpad.css">
    </head>
    <body>
        <div id="drum-machine">
            <div id="display">
                <p id="displaytext"></p>
            </div>
                <div id="controls1">
                <button id="Heater1button"  class="drum-pad"><audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
                <button id="Heater2button" class="drum-pad"><audio class="clip" id='W' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
                <button id="Heater3button" class="drum-pad"><audio class="clip" id='E' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
                </div>
            <div id="controls2">
                <button id="Heater4button" class="drum-pad"><audio class="clip" id='A' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
                <button id="Heater6button"  class="drum-pad"><audio class="clip" id='S'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
                <button id="OpenHHbutton"  class="drum-pad"><audio class="clip" id='D'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
            </div>
            <div id="controls3">
                <button id="KicknHat" class="drum-pad"><audio class="clip" id='Z'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
                <button id="Kickbutton"class="drum-pad"><audio class="clip" id='X'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
                <button id="ClosedHHbutton"class="drum-pad"><audio class="clip" id='C' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
            </div>
        </div>

    </body>
    </html>

редактировать

Я просто заметил, что это сломано... hangon...

редактировать

хорошо, теперь это должно быть хорошо

Поделиться
  • 0
    Спасибо. Чувак, это было действительно интенсивно. Надеюсь, мне никогда не приходилось иметь дело только с чистым JavaScript в моей карьере!
0

EternalDoubter Как я могу добавить фокус или класс css после ключевого события?

С помощью творческого стиля :active или :focus pseudo classes с помощью box-shadow: inset...;

Использование :active pseudo class:

button {
  background: #ededed;
  border: 1px solid #ccc;
  padding: 10px 30px;
  border-radius: 3px;
  cursor: pointer;
}

button:active {
  background: #e5e5e5;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
          box-shadow: inset 0px 0px 5px #c1c1c1;
   outline: none;
}
<button>
  Click me
</button>

Использование псевдо-класса: :focus:

button {
  background: #ededed;
  border: 1px solid #ccc;
  padding: 10px 30px;
  border-radius: 3px;
  cursor: pointer;
}

button:focus {
  background: #e5e5e5;
  outline: none;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
          box-shadow: inset 0px 0px 5px #c1c1c1;
}
<button>
  Click me
</button>
Поделиться
  • 0
    Это работает только при нажатии, а не при нажатии!
  • 0
    Извините, я понял, что не достаточно ясен. При использовании псевдокласса :active он работает, но не с :focus . Тогда ничего не происходит при нажатии на кнопку. Без изменения цвета фона.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню