This is the 28th day of my participation in Gwen Challenge

6. Mouse button

The Click event fires only when a mouse key is pressed on the element (or when the enter key on the keyboard is pressed). For mouseDown and Mouseup, the event object has a button property that indicates which key is released. DOM defines three values for the button property:

  • 0: indicates the primary mouse button (usually the left mouse button).
  • 1: indicates the middle of the mouse (scroll button)
  • 2: indicates the secondary mouse button (usually the right mouse button)

IE8 and previous versions will have completely different key information. If you use this property, remember compatibility.

7. Additional event information

The DOM2 Events specification provides the detail property on the event object to give more information about the event. For mouse time, the detail property records how many clicks occurred at a given location. The value of detail starts at 1, and each click increments by 1. If the mouse moves between mouseDown and mouseup, the detail is reset to 0.

Internet Explorer also provides some additional information for mouse events, which are not expanded because they are not used very often.

8. Mousewheel event

Internet Explorer 6 implements mousewheel events for the first time. Other browsers followed suit. This event will fire on any element and bubble up to the window. The Event object for the MouseWheel event contains all the standard information for mouse events, in addition to a new property called wheelDelta. When the mouse wheel rolls forward, wheelDelta is +120 each time; When the mouse wheel is rolled back, wheelDelta is -120 each time.

You can use the following code to interact with the wheel events:

document.addEventListener("mousewheel".(e) = > {
 console.log(e.wheelDelta);
});
Copy the code

9. Touch screen devices

Touch screens usually do not support mouse operation. Here are some things to keep in mind when developing for touchscreen devices.

  • Does not supportdblclickEvents.
  • A single point touches a clickable element on the screenmousemoveEvents. If the action causes the page content to change, terminate the firing of other events. If there is no change, successive fires occurmousedown,mouseup 和 clickEvents.
  • mousemoveEvents also firemouseover 和 mouseoutEvents.
  • Triggered when the page scrolls due to double pointing and slidingmousewheel 和 scrollEvents.

10. Accessibility

If the site needs to consider people with disabilities, we’d be better off just using the Click mouse event. On this issue, the following suggestions are given:

  • Don’t usemousedownalternativeclickEvent because the screen reader cannot triggermousedownEvents.
  • Don’t usemouseoverPresents the user with a new option, which again cannot be triggered on a screen reader.
  • Don’t usedblclickPerform an important action because the keyboard cannot trigger this action.

reference

[1] JavaScript Advanced Programming (4th edition)