JavaScript DOM MouseEvent property: button
[this page | pdf | back links]
The button property
of MouseEvent
objects within the JavaScript
DOM (i.e.
events triggered by an action with the mouse) returns which mouse button was
pressed.
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)