cad base map simulates click event

There is a requirement to draw multiple operable rectangles on the canvas. Each rectangle corresponds to a form and needs to be verified. When a form fails the verification, the corresponding rectangle needs to be selected. Fabric.js is used to draw pictures. Because I couldn’t find a way to select graphics in fabric at first, I planned to use virtual clicks to implement it. Baidu later implemented click events, so I wrote it down so that I can use it when needed later.

There are only three steps, or two steps: new a MounseEvent object; get the target node; send the event object to the target node

1. Generate events. Here, a scene of dragging canvas is implemented, so two events of mouse pressing and mouse movement are made (the following parameters are not necessary, as long as they can realize the function. For detailed configuration, please refer to MDN, there is a link at the end of the article)
//Mouse press event
const eventdown = new MouseEvent(“mousedown”, {
button: 0,
clientX: 1058,
clientY: 289,
bubbles: true,
buttons: 1
})
//Mouse move event
const eventmove = new MouseEvent(“mousemove”, {
button: 0,
clientX: 1000,
clientY: 240,
bubbles: true,
buttons: 1
})

2. Get the node; 3. Send the event

const canvas = document.getElementsByClassName(“canvasname”)[0];
canvas.dispatchEvent(eventdown);
canvas.dispatchEvent(eventmove);
This completes the movement of the canvas, and the same applies to click events.

1 Types of mouse events

Mouse events refer to mouse-related events and inherit the MouseEvent interface. Specific events mainly include the following:

  • click: Fires when the mouse is pressed (usually the home button).
  • dblclick: Triggered when the mouse is double-clicked on the same element.
  • mousedown: Fired when the mouse button is pressed.
  • mouseup: Fires when the pressed mouse button is released.
  • mousemove: Triggered when the mouse moves inside a node. This event will fire continuously when the mouse continues to move. In order to avoid performance problems, it is recommended to make some restrictions on the event listening function, such as limiting it to only run once within a period of time.
  • mouseenter: Triggered when the mouse enters a node. Entering a child node will not trigger this event (see below for details).
  • mouseover: Triggered when the mouse enters a node. Entering a child node will trigger this event again (see below for details).
  • mouseout: Triggered when the mouse leaves a node. This event will also be triggered when leaving the parent node (see below for details).
  • mouseleave: Triggered when the mouse leaves a node. Leaving the parent node will not trigger this event (see below for details).
  • contextmenu: Fires when the right mouse button is pressed (before the context menu appears), or when the “context menu key” is pressed.
  • wheel: Triggered when the mouse wheel is rolled. This event inherits the WheelEvent interface.

The click event refers to the user first completing the mousedown action and then completing the mouseup action at the same position. Therefore, the firing order is, mousedown fires first, mouseup fires next, and click fires last.

The dblclick event will be triggered after mousedown, mouseup, and click.

The mouseover event and the mouseenter event are both triggered when the mouse enters a node. The difference between the two is that the mouseenter event is only triggered once, while the mouseover event will be triggered multiple times on child nodes as long as the mouse moves inside the node.

2 MouseEvent interface overview

The MouseEvent interface represents mouse-related events, including click (click), double-click (dblclick), and release of the mouse button (mouseup ), pressing the mouse button (mousedown) and other actions, the event objects generated are all instances of MouseEvent. In addition, wheel events and drag events are also instances of MouseEvent.

The MouseEvent interface inherits the Event interface, so it has all the properties and methods of Event. It also has its own properties and methods.

The browser natively provides a MouseEvent constructor for creating a new MouseEvent instance:

let event = new MouseEvent(type, options);

The MouseEvent constructor accepts two parameters. The first parameter is a string, indicating the event name; the second parameter is an event configuration object, which is optional. In addition to the instance configuration properties of the Event interface, this object can be configured with the following properties, all of which are optional:

  • screenX: Numeric value, the horizontal position of the mouse relative to the screen (unit pixel), the default value is 0, setting this property will not move the mouse.
  • screenY: numerical value, the vertical position of the mouse relative to the screen (unit pixel), the others are the same as screenX.
  • clientX: Numeric value, the horizontal position of the mouse relative to the program window (unit pixel), the default value is 0, setting this property will not move the mouse.
  • clientY: Numeric value, the vertical position of the mouse relative to the program window (unit pixel), others are the same as clientX.
  • ctrlKey: Boolean value, whether the Ctrl key is pressed at the same time, the default value is false.
  • shiftKey: Boolean value, whether the Shift key is pressed at the same time, the default value is false.
  • altKey: Boolean value, whether to press the Alt key at the same time, the default value is false.
  • metaKey: Boolean value, whether the Meta key is pressed at the same time, the default value is false.
  • button: Numeric value, indicating which mouse button was pressed. The default value is 0, which means that the primary key (usually the left button of the mouse) was pressed or the current event does not define this Property; 1 means pressing the secondary key (usually the middle mouse button), 2 means pressing the secondary key (usually the right mouse button).
  • buttons: Value, indicating which mouse buttons have been pressed. It is a three-bit binary value, and the default is 0 (no keys are pressed). 1 (binary 001) means pressing the primary key (usually the left button), 2 (binary 010) means Press the secondary key (usually the right key), 4 (binary100) means press the secondary key (usually the middle key). Therefore, returning 3 (binary 011) means that the left and right buttons were pressed simultaneously.
  • relatedTarget: Node object, representing the related node of the event, the default is null. In mouseenter and mouseover events, it represents the element node that the mouse just left; in mouseout and mouseleave events, it represents The element node the mouse is entering.