jQuery: Distinguish between left and right mouse click with jQuery

Last update on July 22 2025 12:40:01 (UTC/GMT +8 hours)

jQuery Practical exercise Part - I: Exercise-20

Distinguish between left and right mouse click with jQuery.

Sample Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Distinguish between left and right mouse click with jQuery</title>
  </head>
  <body>
  <h1 class="element">jQuery Exercises</h1>
  </body>
  </html>

JavaScript Code:


$(document).on("contextmenu", ".element", function(e){
   console.log('Right Mouse Clicked!');
   return false;
});

$(document).on('click', '.element', function(){
 console.log('Left Mouse Clicked!');
});

Go to:

PREV : Remove style added with .css() function using jQuery.
NEXT : Check if an object is a jQuery object.

See the Pen jquery-practical-exercise-20 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.