JavaScript MouseEvent Button Property

0 0 1 minute read

The MouseEvent button property is used to define the left or right-click events. When the mouse button is clicked then it returns an integer value which describes the left, right, or middle mouse button. Syntax:

event.button

Return Value: This event returns an integer value on mouse click events are:

0: It indicates the left mouse button.
1: It indicates the middle mouse button.
2: It indicates the right mouse button.

The onmousedown event: This event occurs when a user presses a mouse button over an element.

Example 1:

HTML

<h1 style="color:green"> 
    zambiatek 
</h1> 
<h2>Mouse click event</h2> 
<button onclick="click(event)">Click me</button> 
<p id="demo"></p> 
<script> 
    document.onmousedown = click 
      
    // click function called 
    function click(event) { 
          
        // Condition to disable left click 
        if (event.button == 0) { 
                document.getElementById("demo").innerHTML= "Left click not allowed" 
        } 
    } 
</script>

Output:

JavaScript MouseEvent Button Property

Example 2:

HTML

<h1 style="color:green"> 
    zambiatek 
</h1> 
<h2>Mouse click event</h2> 
<button onclick="click(event)">Click me</button> 
<p id="demo"></p> 
<script> 
    document.onmousedown = click 
      
    // click function called 
    function click(event) { 
          
        // Condition to disable left click 
        if (event.button == 2) { 
                document.getElementById("demo") 
                          .innerHTML = "Right click not allowed"; 
        } 
    } 
</script>