which and button both JS properties are used to examine the mouse or keyboard event. The difference between them is that which property supports only the latest versions of browsers or modern browsers and the button property is to work in older versions of browsers like internet explorer version below than 9.0
which Property in JS
| Mouse Event | Object Number (In newer versions) | Object Number (In older versions) |
|---|---|---|
| Left Button | 1 | undefined |
| Middle Button | 2 | undefined |
| Right Button | 3 | undefined |
Example (mouse event)~
<!DOCTYPE html>
<html>
<head>
<title>Which and Button Property</title>
</head>
<body>
<button onmouseup="check(event)" id="btn">Check Mouse Event</button>
<script>
function check(event){
window.alert(event.which);
document.oncontextmenu=function(){return false;}
}
</script>
</body>
</html>Example (Keyboard event)~
<body>
<h1 align="center">Press any key to know keycode (ASCII value)</h1>
<script>
onkeydown = function(event){
window.alert(event.which);
}
</script>
</body>button Property in JavaScript
| Mouse Event | Object Number (In older versions) | Object Number (In newer browsers) |
|---|---|---|
| Left Button | 1 | 0 |
| Middle Button | 4 | 1 |
| Right Button | 2 | 2 |
Example (mouse event)~
<!DOCTYPE html>
<html>
<head>
<title>Which and Button Property</title>
</head>
<body>
<button onmouseup="check(event)" id="btn">Check Mouse Event</button>
<script>
function check(event){
window.alert(event.button);
document.oncontextmenu=function(){return false;}
}
</script>
</body>
</html>Example (keyboard event)~
<body>
<h1 align="center">Press any key to know keycode (ASCII value)</h1>
<script>
onkeydown = function(event){
window.alert(event.button);
}
</script>
</body>if you select button through var x=document.getElementById("btn"); and apply mouse events then it will not work in lower versions.
Cross Browser Solution for mouse event
Works in older and newer both versions of browsers.
<!DOCTYPE html>
<html>
<head>
<title>Which and Button Property</title>
</head>
<body>
<button onmouseup="check(event)" id="btn">Check Mouse Event</button>
<script>
function check(event){
document.oncontextmenu=function(){return false;}
if(event.which)
{
switch(event.which)
{
case 1: alert("Left Click");
break;
case 2: alert("Middle Click");
break;
case 3: alert("Right Click");
break;
default : alert("unknown");
}
}
else
{
switch(event.button)
{
case 1: alert("Left Click");
break;
case 4: alert("Middle Click");
break;
case 2: alert("Right Click");
break;
default : alert("unknown");
}
}
}
</script>
</body>
</html>Cross Browser Solution for keyboard event
<!DOCTYPE html>
<html>
<head>
<title>Examine Mouse Event In Jquery</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Press any to know keycode (ascii value)</button>
<script>
$(document).ready(function(){
$(document).keydown(function(event){
alert(event.which);
});
});
</script>
</body>
</html>In the above example, document.oncontextmenu=function(){return false;} prevent the browser from showing its default box when you right-click that has options to reload, back, forward, etc.
Publish A Comment