Pointer Actions

Button click or touch the screen

A pointer action is used for press action, and it is defined as a key to press, hold, or both. We can declare multiple actions for the same positions and resolve them internally. If we do not want to use any other properties, we can directly supply the key string.

pointer({keys: '[MouseRight]'})
pointer({keys: '[MouseRight][MouseLeft]'})
// or
pointer('[MouseRight][MouseLeft]')

We can declare a pointer action on mouse hover or click as given above for the left or right side of the mouse. The button name should be suffixed with > to click any button without releasing it, and for releasing the previously clicked button, the tag should start with /.

pointer('[MouseRight>]') // press the Right mouse button
pointer('[/MouseRight]') // release the Right mouse button

Moving a pointer

Moving pointer is defined as the movement of the pointer along with the press actions. This moving pointer can understand where the pointer is located and where it is moving to. A touch pointer is triggered when the screen is touched and receives a new pointer ID. For these pointers, we always use the "button" from the press action as pointerName.

pointer([
  {keys: '[TouchB>]', target: element0},
  {pointerName: 'TouchB', target: element1},
  {keys: '[/TouchB]'},
])

We define the pointer action for moving a pointer as above. We press on the mouse at element0 and start moving the pointer to element1 by holding or without releasing it. 

Pointer position 

PointerTarget 

This pointer target allows us to describe the position of the pointer on the screen or the document. The coords we provide are applied for the resulting MouseEvent and are optional.

interface PointerTarget {
  target: Element
  coords?: PointerCoords
}

SelectionTarget 

Pointer action can make a difference from selection in the document.

interface SelectionTarget {
  node?: Node
  offset?: number
}

We have a pointer position in each browser corresponding with the DOM position. The DOM node and DOM offset translate the character closest to the pointer position. All characters are declared in a no-layer environment and are in the same layout position. We can assume that the pointer position is in the last declaration of the closest ones to the pointer in a target. When we provide any offset, the pointer position is most relative to the offset-th character of textContent of the target. The node and offset are at the same DOM position and can be used for any selection.

pointer({target: element, offset: 2, keys: '[MouseRight]'})

pointer([
  {target: element, offset: 2, keys: '[MouseRight>]'},
  {offset: 5},
])

pointer({target: element, node: element, offset: 1, keys: '[MouseRight]'})

FAQs

1. What is Pointer Action?
   The pointer action is an API that allows us to interact with the pointer devices and can be moved or pressed as per the user action.
    
2. What are the examples of Pointer Action?
   The Pointer Actions are triggered according to the actions performed by the user. These actions can be mouse click actions, hover actions, etc.
    
3. How to declare Press Action?
   We can declare a pointer action by declaring the method pointer() with the "keys" property that describes the action of the pointer.
    
4. How to declare pointer target?
   We can declare a pointer target by declaring the keys target and coords in the pointerTarget interface. The element where the target is present is given as a value to the target, and the coordinates of the pointer are given for location to the coords variable.
    
5. How to specify a button press and release in pointer actions?
   The suffix > can be added to the button name for the press action, and a prefix / can be added to the button name to release the pressed button, as shown below.
    

pointer('[MouseRight>]') // press the button
pointer('[/MouseRight]') // release the button

Key Takeaways

We have discussed the pointer actions and their positions. We also learned how the moving pointer could be defined and wrote a basic test using pointer action trigger functions. 

Hey Ninjas! We hope this blog helped you understand user events and their usage. If you want to learn more, check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems. Please upvote our blog to help the other ninjas grow.

Happy Coding!