Question

无论如何触发事件，如何使按钮显示为按下状态？（使用keydown事件或click事件）。我曾考虑过在keydown事件中添加“ click（）”，但这没用

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>

编辑

我只是发现它坏了... hangon ...

编辑

好的，现在应该很好

Answer 2

永恒的怀疑者按键事件后如何添加焦点或CSS类？

通过使用盒形阴影创造性地设置:active或:focus伪类的样式：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>

将click事件添加到key事件

2 个答案: