Dear Ms. FEWD,
Three Blind Mice Clicks
First, it’s not the click that you’re necessarily interested in, but which mouse key the user is pressing. The mousedown event fires when the mouse button is pressed, while mouseup fires when the mouse button is released. For this example, I used mousedown:
//code to distinguish between clicks
We then need to figure out a way to execute script depending on which mouse key is pressed. A switch statement gives us this structure in which to fire different code depending on the case. As defined by w3schools, the basic syntax for a switch statement is as follows:
default code block
What expression should we pass, so that we can set up these cases for each mouse button? The “.which” property will be our best bet. From the jQuery API documentation, event.which “normalizes button presses (mousedown and mouseup events), reporting 1 for left button, 2 for middle, and 3 for right.” We labeled the event handler as “event” in our mousedown event, which we then pass as our event object, becoming event.which. If you passed the letter “e” as the event handler (e.g. function(e)), it would be written as e.which. The jQuery API documentation already lists out our natural numbers (n) and which mouse button they correspond to, for our cases. We just need to define what code needs to fire, within each “code block” section, when the matching mouse button is clicked.
Full working example of a container that can distinguish between any mouse key on mousedown:
Do you have a front end development question? Ms. FEWD has answers. Email her at MsFEWD@tahzoo.com.