When the page is scrolled, they change.įor instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then clientX and clientY are 0, no matter how the page is scrolled.Īnd if the mouse is in the center, then clientX and clientY are 250, no matter what place in the document it is. In short, document-relative coordinates pageX/Y are counted from the left-upper corner of the document, and do not change when the page is scrolled, while clientX/Y are counted from the current window left-upper corner.
We already covered the difference between them in the chapter Coordinates.
Coordinates: clientX/Y, pageX/YĪll mouse events provide coordinates in two flavours: So that if the visitor uses a keyboard – they work.īut if their device doesn’t have it – then there should be a way to live without modifier keys. Keyboard combinations are good as an addition to the workflow. In practice this property is very rarely used, you can find details at MDN if you ever need it. Touch devices also generate similar events when one taps on them.Īlso there’s event.buttons property that has all currently pressed buttons as an integer, one bit per button. Most mouse devices only have the left and right buttons, so possible values are 0 or 2. The possible values of event.button are: Button state On the other hand, mousedown and mouseup handlers may need event.button, because these events trigger on any button, so button allows to distinguish between “right-mousedown” and “left-mousedown”. We usually don’t use it for click and contextmenu events, because the former happens only on left-click, and the latter – only on right-click. On the teststand below, all mouse events are logged, and if there is more than a 1 second delay between them, they are separated by a horizontal rule.Īlso, we can see the button property that allows us to detect the mouse button it’s explained below.Ĭlick-related events always have the button property, which allows to get the exact mouse button. That is, the handlers are called in the order mousedown → mouseup → click.Ĭlick the button below and you’ll see the events. In cases when a single action initiates multiple events, their order is fixed. Events orderĪs you can see from the list above, a user action may trigger multiple events.įor instance, a left-button click first triggers mousedown, when the button is pressed, then mouseup and click when it’s released. …There are several other events too, we’ll cover them later. using a special keyboard key, it triggers in that case also, so it’s not exactly the mouse event. There are other ways to open a context menu, e.g. contextmenu Triggers when the right mouse button is pressed. dblclick Triggers after two clicks on the same element within a short timeframe. click Triggers after mousedown and then mouseup over the same element if the left mouse button was used. mousemove Every mouse move over an element triggers that event. mouseover/mouseout Mouse pointer comes over/out from an element. We’ve already seen some of these events: mousedown/mouseup Mouse button is clicked/released over an element. Please note: such events may come not only from “mouse devices”, but are also from other devices, such as phones and tablets, where they are emulated for compatibility. In this chapter we’ll get into more details about mouse events and their properties.
0 kommentar(er)
