/

HTML / CSS / JavaScript Tutorial

JavaScript DOM MouseEvent property: altKey

[this page | pdf | back links]

The altKey property of MouseEvent objects within the JavaScript DOM (i.e. events triggered by an action with the mouse) returns true if the ‘ALT’ key was pressed, otherwise returns false.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Try clicking on this box:
<p style="background-color: yellow; border: 2px solid black; width: 200px; height: 100px;"
  onmousedown="myOnmousedown(event)"><br><br></p>

MouseEvent outcomes are:<br><br>
altKey: <b id="mouse1"></b><br>
button (usually 0 = left, 1 = middle, 2 = right): <b id="mouse2"></b><br>
buttons (usually sum of 1 = left, 2 = right, 4 = middle, 8 = back, 16 = forward): 
  <b id="mouse3"></b><br>
clientX: <b id="mouse4"></b><br>
clientY: <b id="mouse5"></b><br>
ctrlKey: <b id="mouse6"></b><br>
detail: <b id="mouse7"></b><br>
metaKey: <b id="mouse8"></b><br>
pageX: <b id="mouse9"></b><br>
pageY: <b id="mouse10"></b><br>
relatedTarget: <b id="mouse11"></b><br>
screenX: <b id="mouse12"></b><br>
screenY: <b id="mouse13"></b><br>
shiftKey: <b id="mouse14"></b><br>
which: <b id="mouse15"></b><br>

<script>
function myOnmousedown(event) {
  document.getElementById("mouse1").innerHTML = event.altKey;
  document.getElementById("mouse2").innerHTML = event.button;
  document.getElementById("mouse3").innerHTML = event.buttons;
  document.getElementById("mouse4").innerHTML = event.clientX;
  document.getElementById("mouse5").innerHTML = event.clientY;
  document.getElementById("mouse6").innerHTML = event.ctrlKey;
  document.getElementById("mouse7").innerHTML = event.detail;
  document.getElementById("mouse8").innerHTML = event.metaKey;
  document.getElementById("mouse9").innerHTML = event.pageX;
  document.getElementById("mouse10").innerHTML = event.pageY;
  document.getElementById("mouse11").innerHTML = event.relatedTarget;
  document.getElementById("mouse12").innerHTML = event.screenX;
  document.getElementById("mouse13").innerHTML = event.screenY;
  document.getElementById("mouse14").innerHTML = event.shiftKey;
  document.getElementById("mouse15").innerHTML = event.which;
}
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile