GamepadButton : Object

Represents a button on the Gamepad.

Instance Properties

pressed : Boolean readonly

true if the button was pressed. For buttons that support value, pressed will be true when value passes a platform/browser specified threshold.

Example:

Press button on controller to connect.
<div id="buttons" style="display: flex; flex-direction: column;"></div>
<script>
window.addEventListener('gamepadconnected', (event) => {
  const update = () => {
    const output = document.getElementById('buttons');
    output.innerHTML = ''; // clear the output

    for (const gamepad of navigator.getGamepads()) {
      if (!gamepad) continue;
      for (const [index, button] of gamepad.buttons.entries()) {
        output.insertAdjacentHTML('beforeend',
          `<label>${gamepad.index}, ${index}
             <progress value=${button.value}></progress>
             ${button.touched ? 'touched' : ''}
             ${button.pressed ? 'pressed' : ''}
           </label>`);
      }
    }
    requestAnimationFrame(update);
  };
  update();
});
</script>

Run

Results:

Spec

touched : Boolean readonly

true if the user is touching the button but not necessarily pressing the button. For hardware that cannot detech touches, will be true when the user is pressing the button.

Example:

Press button on controller to connect.
<div id="buttons" style="display: flex; flex-direction: column;"></div>
<script>
window.addEventListener('gamepadconnected', (event) => {
  const update = () => {
    const output = document.getElementById('buttons');
    output.innerHTML = ''; // clear the output

    for (const gamepad of navigator.getGamepads()) {
      if (!gamepad) continue;
      for (const [index, button] of gamepad.buttons.entries()) {
        output.insertAdjacentHTML('beforeend',
          `<label>${gamepad.index}, ${index}
             <progress value=${button.value}></progress>
             ${button.touched ? 'touched' : ''}
             ${button.pressed ? 'pressed' : ''}
           </label>`);
      }
    }
    requestAnimationFrame(update);
  };
  update();
});
</script>

Run

Results:

Spec

value : Number readonly

The pressure that the button was pressed with between 0 (light press) and 1 (hard press). If the button doesn't measure pressure, will be 0 when unpressed and 1 when pressed.

Example:

Press button on controller to connect.
<div id="buttons" style="display: flex; flex-direction: column;"></div>
<script>
window.addEventListener('gamepadconnected', (event) => {
  const update = () => {
    const output = document.getElementById('buttons');
    output.innerHTML = ''; // clear the output

    for (const gamepad of navigator.getGamepads()) {
      if (!gamepad) continue;
      for (const [index, button] of gamepad.buttons.entries()) {
        output.insertAdjacentHTML('beforeend',
          `<label>${gamepad.index}, ${index}
             <progress value=${button.value}></progress>
             ${button.touched ? 'touched' : ''}
             ${button.pressed ? 'pressed' : ''}
           </label>`);
      }
    }
    requestAnimationFrame(update);
  };
  update();
});
</script>

Run

Results:

Spec

home license contribute feedback toggle light/dark mode