radjs-pointer

    1.0.2 • Public • Published

    Pointer

    The module provides W3C Pointer Events for handling user input. Pointer events are modeled after traditional mouse events, except for their use of the abstract concept of a pointer to apply across all user input modalities, including mouse, touch, and stylus pen. Use pointer events to create seamless user experience across user input methods by writing to a single set of events that work across hardware capabilities.

    Note: Pointer supports multitouch mode. When a user will produce action two or more fingers for each finger module will send an event with a unique pointerId.

    You can disable multitouch mode. You should set parametr enableMultiTouch as false. In this case Pointer works only with one touch. If a user makes a multitouch gesture - the first point will be processed, while the others will be skipped.

    Example


    Initialization

    var $div = document.querySelector('#pointer');
    var pointer = new PointerTracker($div);

    Supported Events

    • pointerup
    • pointerdown
    • pointermove
    • pointerover
    • pointerenter
    • pointerout
    • pointerleave
    • pointercancel

    Warning: The module does not support gotpointercapture and lostpointercapture events.

    --

    pointerup

    Dispatched when a pointer leaves the state of having a non-zero value for the buttons property.

    Syntax
    $div.addEventListener("pointerup", callback, useCapture);

    or

    $div.addEventListener(pointer.EVENTS.up, callback, useCapture);
    Event information

    Synchronous: Yes

    Bubbles: Yes

    Cancelable: Yes

    Remarks

    For mouse, this is when the device transitions from at least one button pressed to no buttons pressed. For touch, this is when physical contact is removed from the digitizer. For pen, this is when the pen is removed from physical contact with the digitizer.

    For input devices that do not support hover, a pointerout event is also fired immediately after the pointerup event is fired.

    --

    pointerdown

    Dispatched when a pointer enters the state of having a non-zero value for the buttons property.

    Syntax
    $div.addEventListener("pointerdown", callback, useCapture);

    or

    $div.addEventListener(pointer.EVENTS.down, callback, useCapture);
    Event information

    Synchronous: Yes

    Bubbles: Yes

    Cancelable: Yes

    Remarks

    For mouse, this is when the device has at least one button pressed. For touch, this is when there is physical contact with the digitizer. For pen, this is when the pen has physical contact with the digitizer. For input devices that do not support hover, thepointerover event is fired immediately before the pointerdown event.

    --

    pointermove

    Dispatched when a pointer changes coordinates, button state, pressure, tilt, or contact geometry (for example, width and height).

    Syntax
    $div.addEventListener("pointermove", callback, useCapture);

    or

    $div.addEventListener(pointer.EVENTS.move, callback, useCapture);
    Event information

    Synchronous: Yes

    Bubbles: Yes

    Cancelable: Yes

    Remarks

    pointermove has two modes:

    1. The event is broadcast if the pointer was pressed, and it changes the coordinates (Set by default).
    2. The event is broadcast when the pointer changes coordinates regardless of the pointerdown state. This mode works correctly only for devices which support hover

    You should call the setMoveHoverState function with a true parameter to switch to the second mode.

    pointer.setMoveHoverState(true);

    Call the setMoveHoverState function with a false parameter to return to the first mode.

    pointer.setMoveHoverState(false);

    --

    pointerover

    Dispatched when a pointing device is moved into the hit test boundaries of an element. Also dispatched prior to a pointerdown event for devices that do not support hover.

    Syntax
    $div.addEventListener("pointerover", callback, useCapture);

    or

    $div.addEventListener(pointer.EVENTS.over, callback, useCapture);
    Event information

    Synchronous: Yes

    Bubbles: Yes

    Cancelable: Yes

    --

    pointerenter

    Dispatched when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover. This event type is similar to pointerover, but differs in that it does not bubble and is cancelable.

    $div.addEventListener("pointerenter", callback, useCapture);

    or

    $div.addEventListener(pointer.EVENTS.enter, callback, useCapture);
    Event information

    Synchronous: Yes

    Bubbles: No

    Cancelable: No

    --

    pointerout

    Dispatched when any of the following occurs:

    • A pointing device is moved out of the hit test boundaries of an element.
    • After firing the pointerup event for a device that does not support hover.
    • After firing the pointercancel event.
    $div.addEventListener("pointerout", callback, useCapture);

    or

    $div.addEventListener(pointer.EVENTS.out, callback, useCapture);
    Event information

    Synchronous: Yes

    Bubbles: Yes

    Cancelable: Yes

    --

    pointerleave

    Dispatched when a pointing device is moved outside of the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover. This event type is similar to pointerout, but differs in that it does not bubble and is cancelable.

    $div.addEventListener("pointerleave", callback, useCapture);

    or

    $div.addEventListener(pointer.EVENTS.leave, callback, useCapture);
    Event information

    Synchronous: Yes

    Bubbles: No

    Cancelable: No

    --

    pointercancel

    Dispatched when either (1) the system has determined that a pointer is unlikely to continue to produce events (for example, due to a hardware event), or (2) after firing the pointerdown event, the pointer is subsequently used to manipulate the page viewport (for example, panning or zooming).

    $div.addEventListener("pointercancel", callback, useCapture);

    or

    $div.addEventListener(pointer.EVENTS.cancel, callback, useCapture);
    Event information

    Synchronous: Yes

    Bubbles: Yes

    Cancelable: No

    Install

    npm i radjs-pointer

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • mobidev
    • r37r0m0d3l