Friday , 17 November 2017
Home / Programming / JavaScript / Mouse Events – Advanced JavaScript Tutorial
Mouse Events
Mouse Events

Mouse Events – Advanced JavaScript Tutorial

Keep track of how the mouse interacts with the web page. It is the primary device for navigation after all. Whenever mouse events occur, you’re passed in a lot of information as to where the mouse is located or what is also happening with the mouse. Let’s take a look at how this works.

Coordinates

We’re going to keep our document the same from the last tutorial. However, clear your script and add this bit of code.

You can grab the exact coordinates of the mouse event by checking the clientX and clientY properties of the event object. In the above code, we alert the coordinates of the X and Y position of the mouse click. The client coordinates refer to the client screen only. Without scrolling, click the bottom right corner. Now, scroll down to the bottom and click the bottom right corner again. You should get the same coordinates. You can even resize the window and click the same corner and get the same coordinates. This can be a problem if you’re trying to find the coordinates related to the page or screen.

Luckily, there’s another solution. Let’s update the event to this.

I decided to comment out the client coordinates. You use the pageX and pageY properties of the event object to grab the page coordinates. Try clicking the same spots, but scrolling up and down. You should get different coordinates now. The pageX and pageY properties grab the coordinates by the position of the document.

Let’s update our event one more time to this.

Here we use the screenX and screenY properties to grab the coordinates of the click related to the user’s screen.

Click the top left corner. Now try resizing your browser and click the same left corner in your document. You should get different coordinates. The screen coordinates are related to the user’s screen. However, you must click somewhere in the document in order to use it. If you clicked outside the window, then you would get nothing.

Keys

Sometimes users can click an element while also holding down a key. There are four properties that detect if a key is being held down while the click event occurs. Update your script to this.

We use the ternary operator here to help us append the keys pressed. First, we create a variable called keys that will hold the string of keys pressed. We set it’s initial value to an empty string so we don’t have to worry about null or undefined values being appended to it.

We append the results from the ternary operator. Each ternary operator checks the key pressed. The shiftKey, ctrlKey, altKey, and metaKey properties are either true or false values. These properties can be accessed by the event object. If they’re true, then we’ll  just append the key pressed. If false, then we append an empty string.

Finally, we output the final result. You can use if statements, but ternary operators makes it look a whole cleaner and easier to read. Keep in mind that these properties only exist if the event is a click event.

Buttons

Mouses usually come with 3 buttons. The primary button, wheel button and secondary button. Update your script to this.

The button property can have either 3 values. If the user clicks with the primary button, then the value is 0. If the user clicks with the wheel, then the value is 1. If the user clicks with the secondary button, then the value is 2.

You can now click anywhere in the window and you should get the alert message of which button you’ve pressed. The button property only exists if the event is mousedown or mouseup.

Conclusion

Mouse events are great for adding interactivity to your website. You can also use it to detect if your site is visited by bots. As bots don’t have the same behavior as humans do.  If you would like more information on the mouse event, then go here.

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link