![]() ![]() Now I just had to figure out the width of the element I had clicked on, and calculate the percentage based on how far into the element I clicked. I went with the MouseEvent.offsetX option, as it would give me the position relative to the element the event listener was attached to. For my use case, I was trying to determine the mouse’s horizontal position inside a specific element. This gives us a lot of flexibility when handling mouse events. If multiple screens are being used, value is calculated from the farthest left, and uppermost screens respectively. Calculated from the left and top sides of screen. MouseEvent.screenX / MouseEvent.screenY ~ Coordinates of mouse event relative to the user’s entire screen.Calculated from left and top sides of entire document, even if scrolled out of view. ![]() MouseEvent.pageX / MouseEvent.pageY ~ Coordinates of mouse event relative to the entire document.Calculated from the left padding and the top padding. MouseEvent.offsetX / MouseEvent.offsetY ~ Coordinates of mouse event relative to the edge of the padding on the targeted node.MouseEvent.movementX / MouseEvent.movementY ~ Coordinates of mouse event relative to last mouse event.Calculate from the left side and the top of the viewport. MouseEvent.clientX / MouseEvent.clientY ~ Coordinates of mouse event relative to viewport.The MouseEvent provides us with several ways of determining where we clicked. So I had an event triggered from the element I clicked on. I wanted to list some basic information about the different methods and when one might be more useful than the other. During the process I came across a couple different ways to solve the problem, using different methods provided by JavaScript. I was trying to determine where on some elements I had clicked, as a percentage in relation to their width. On a recent project, I was using event listeners on mouse events.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |