HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>buttons — log</title>
</head>
<body>
  <p>Click anywhere with one or more mouse buttons.</p>
  <pre id="log">[No clicks yet]</pre>
  <script>
    var buttonNames = ["left", "right", "wheel", "back", "forward"];
    function mouseButtonPressed(event, buttonName) {
      return Boolean(event.buttons & (1 << buttonNames.indexOf(buttonName)));
    }
    function format(event) {
      var obj = { type: event.type, buttons: event.buttons };
      for (var i = 0; i < buttonNames.length; i++) {
        var name = buttonNames[i];
        obj[name] = mouseButtonPressed(event, name);
      }
      return JSON.stringify(obj, null, 2);
    }
    var log = document.getElementById("log");
    function logButtons(event) {
      log.textContent = format(event);
    }
    document.addEventListener("mouseup", logButtons);
    document.addEventListener("mousedown", logButtons);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

MouseEvent.buttons — log bit-field (Try It)