{"id":326,"date":"2013-10-08T22:00:09","date_gmt":"2013-10-08T14:00:09","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=326"},"modified":"2018-09-29T22:20:03","modified_gmt":"2018-09-29T14:20:03","slug":"how-to-use-jquery-to-detect-mouse-clicks","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-use-jquery-to-detect-mouse-clicks\/","title":{"rendered":"How to use jQuery to detect mouse clicks"},"content":{"rendered":"

Right after I found out how to get mouse cursor coordinates when mouse moves<\/a>, I went ahead with exploring how to detect mouse clicks.<\/p>\n

This post discuss how I had used jQuery to detect mouse clicks.<\/p>\n

Registering a JavaScript callback function to listen to mouse clicks<\/h2>\n

Getting my codes notified of mouse clicks is simple via jQuery:<\/p>\n

\r\n$(document).mousedown(function(e) {\r\n    switch(e.which) {\r\n        case 1:\r\n\t    $('#mouseButtonStatus')\r\n                .html("You had just clicked on the left button of your mouse");\r\n            break;\r\n        case 2:\r\n\t    $('#mouseButtonStatus')\r\n                .html("You had just clicked on the scroll button of your mouse");\r\n\tbreak;\r\n        case 3:\r\n\t    $('#mouseButtonStatus')\r\n                .html("You had just clicked on the right button of your mouse");\r\n            break;\r\n    }\t\t\t\r\n});\r\n<\/pre>\n
I wrap the document object with jQuery<\/code> and supplied a function to the mousedown<\/code> function. In the function, I will receive a event object e<\/code> from jQuery when mouse clicks are detected. I then use e.which<\/code> to switch between numbers that identify which mouse button was being clicked. A 1 will mean that the left button of my mouse was clicked, a 2 will mean that the scroll button of my mouse was clicked and a 3 will mean that the right button of my mouse was clicked.<\/p>\n
In each of the three cases, I then use jQuery<\/code> to look up the HTML element labeled with mouseButtonStatus<\/code> as its id and inject the appropriate messages as its HTML content.<\/p>\n
The entire HTML document<\/h2>\n
To fully realize this proof of concept, I head over to my list of HTML code segments<\/a> and construct a HTML document. In the head section, I add the jQuery codes; In the body, a HTML div element with mouseButtonStatus<\/code> as its id to contain the message.<\/p>\n
\r\n<html>\r\n<head>\r\n    <script type="text\/javascript" src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js"><\/script>\r\n    <script type="text\/javascript">\r\n\t$(document).ready(function(){\t   \r\n\t    $(document).mousedown(function(e) {\r\n\t        switch(e.which) {\r\n\t\t    case 1:\r\n\t\t        $('#mouseButtonStatus')\r\n                            .html("You had just clicked on the left button of your mouse");\r\n\t\t    break;\r\n\t\t    case 2:\r\n\t\t\t$('#mouseButtonStatus')\r\n                            .html("You had just clicked on the scroll button of your mouse");\r\n\t\t    break;\r\n\t\t    case 3:\r\n\t\t\t$('#mouseButtonStatus')\r\n                            .html("You had just clicked on the right button of your mouse");\r\n\t\t    break;\r\n\t\t}\t\t\t\r\n\t    });\r\n\t});\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n<div id="mouseButtonStatus">\r\nNo mouse clicks detected yet.\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\n   See this proof of concept<\/a>\n<\/div>\n\n