which and button Property | Cross Browser Solution

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 EventObject Number
(In newer versions)
Object Number
(In older versions)
Left Button1undefined
Middle Button2undefined
Right Button3undefined

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 EventObject Number
(In older versions)
Object Number
(In newer browsers)
Left Button10
Middle Button41
Right Button22

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.

Leave a Comment