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

Question

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

javascript addeventlistener

1

user10546342 23 Окт 2018 в 17:43

Answer 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's 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>

< EM> изменить

Я только что заметил, что он сломан ... хангон ...

< EM> изменить

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

1

dgeare 23 Окт 2018 в 15:19

Answer 2

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

Путем творческого оформления псевдоклассов :active или :focus с помощью box-shadow: inset ...;

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

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

Vasavi Joola 23 Окт 2018 в 15:18

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

2 ответа

Похожие вопросы

Новые вопросы

javascript