- Getting the Mouse Click Position
- HTML5 Canvas Mouse Coordinates Tutorial
- Getting the current mouse position
While this may be hard to believe, especially if you are familiar with how layout in HTML works, elements are positioned in some sort of sensible manner. Those manners are many and often confusing to discuss here, but there is some logic behind the position of everything you see. With great certainty, all elements end up at a particular location. The difficult thing to grasp is that, the location of an element is something you indirectly define by fiddling with parent elements, floats, paddings, margins, positions, and more. Very rarely will you set the position of an element using a precise X and Y value. In times that you do, those values are relative to whatever container you are in - a container whose own position may be set through mysterious ways. In this short tutorial, you will see the code for getting the exact position of an HTML element and learn why it works the way it does. This will be a good one, so let's get started! It returns an object containing an x property and a y property. You should also ensure you update the various position values when your browser is scrolled or resized. The updatePosition function helps you reset any values accordingly when those situations happen:. What you've seen here is just the basic usage. That is still an incomplete picture on how it works, so let's fix that in the next section. To see the code from the previous section at work, here is a live example. When you run the example, you will see a dialog that looks as follows:. This dialog tells you the position of an element you are looking for, and that element is the image of Nyan Cat with an id of imageLocation. The returned position is an x value of and a y value of If you use a 3rd party tool to measure the position from the top-left corner of your viewport to the top-left corner of the image, you will see that the position exactly matches what our code showed:. Let's talk a little bit more about this example. Like the example page's text mentions, the image is located inside a container that is absolutely positioned and has all kinds of CSS shenanigans applied to it. Despite that, our code was able to get the exact position. You can even try resizing your browser and scrolling the page around. The position will still be properly returned. Right now, you've seen the code. You've seen the example. All that is left is for you to understand why the code works. Before looking at each line in detail, let's talk a little bit about how layout for an element works in HTML. For the most part, an element's position is partly determined by its own CSS properties, but it is largely determined by its parent's CSS properties. The properties that I am referring to are primarily the paddingmarginand border. A great visualization of how those properties affect layout is by looking at the box model view for the element named container from our example:. Notice how the values for paddingmarginand border are represented in the diagram. At the far-left and top, you can see the left and top CSS properties represented because this element is absolutely positioned. To contrast the flamboyance of our containerlet's look at the image element. Our image lives inside this container, and it has no custom values defined for padding, margin, or border. If you look at the box model values for it, it looks pretty plain:. Despite nothing exciting happening with our image, because its parent is the container element you saw earlier, your image will inherit the layout and position settings of the parent. This drives home the point made earlier where the layout of an element is determined both by its own settings as well as the settings of its parent. What we have here is a relatively simple case. In something more complex, your element may have many MANY parents:. Each parent element might have its own special blend of paddings, margins, and borders that play a role in positioning a child element.
HTML5 Canvas Mouse Coordinates Tutorial