Type that get returned by a pointer event.

Since the JS class PointerEvent inherits from MouseEvent, the pointer attribute here is of type Mouse.Event.

So to get the relative (offset) position of a pointer event for example:

relativePos : Pointer.Event -> ( Float, Float )
relativePos event =
    event.pointer.offsetPos

And to know if the shift key was pressed:

isShiftKeyPressed : Pointer.Event -> Bool
isShiftKeyPressed event =
    event.pointer.key.shift

The type of device that generated the pointer event

Details of the point of contact, for advanced use cases.

Listen to pointerdown events.

Let's say that we have a message type like this:

type Msg
    = DownMsg ( Float, Float )
    | MoveMsg ( Float, Float )
    | UpMsg ( Float, Float )

And we already have defined the relativePos : Pointer.Event -> ( Float, Float ) function (see Pointer.Event doc). Then we could listen to pointerdown events with something like:

div [ Pointer.onDown (relativePos >> DownMsg) ] [ text "click here" ]

However, since the Pointer API is not well supported by all browsers, I strongly recommend to use it in pair with the elm-pep polyfill for compatibility with Safari and Firefox < 59. It is also recommended that you deactivate touch-action to disable browsers scroll behaviors.

div
    [ Pointer.onDown ...
    , Pointer.onMove ...
    , Pointer.onUp ...


    -- no touch-action (prevent scroll etc.)
    , Html.Attributes.style [ ( "touch-action", "none" ) ]
    ]
    []

Listen to pointermove events.

Similarly than with onDown, we can write something like:

div [ Pointer.onMove (relativePos >> MoveMsg) ] [ text "move here" ]

Listen to pointerup events.

Similarly than with onDown, we can write something like:

div [ Pointer.onUp (relativePos >> UpMsg) ] [ text "click here" ]

Listen to pointercancel events.

Similarly than with onDown, we can write something like:

div [ Pointer.onCancel (relativePos >> UpMsg) ] [ text "move here" ]

Listen to pointerover events.

Similarly than with onDown, we can write something like:

div [ Pointer.onOver (relativePos >> UpMsg) ] [ text "move in here" ]

Listen to pointerenter events.

Similarly than with onDown, we can write something like:

div [ Pointer.onEnter (relativePos >> UpMsg) ] [ text "move in here" ]

Listen to pointerout events.

Similarly than with onDown, we can write something like:

div [ Pointer.onOut (relativePos >> UpMsg) ] [ text "move out of here" ]

Listen to pointerleave events.

Similarly than with onDown, we can write something like:

div [ Pointer.onLeave (relativePos >> UpMsg) ] [ text "move out of here" ]

Choose the pointer event to listen to, and specify the event options.

The Options type here is the standard Html.Events.Options type. If for some reason the default behavior of this lib (stop propagation and prevent default) does not fit your needs, you can change it with for example:

myOnDown : (Pointer.Event -> msg) -> Html.Attribute msg
myOnDown =
    { stopPropagation = False, preventDefault = True }
        |> Pointer.onWithOptions "pointerdown"

An Event decoder for pointer events.

Similarly than with the Mouse module, the decoder is provided so that you can extend Pointer.Event with specific properties you need. If you need for example the tangentialPressure attribute of the pointer event, you could extend the present decoder like:

type alias MyPointerEvent =
    { pointerEvent : Pointer.Event
    , tangentialPressure : Float
    }


myEventDecoder : Decoder MyPointerEvent
myEventDecoder =
    Decode.map2 MyPointerEvent
        Pointer.eventDecoder
        (Decode.field "tangentialPressure" Decode.float)

And use it like as follows:

type Msg
    = TangentialPressureMsg Float


div
    [ myOnDown (.tangentialPressure >> TangentialPressureMsg) ]
    [ text "Use pen here to measure tangentialPressure" ]


myOnDown : (MyPointerEvent -> msg) -> Html.Attribute msg
myOnDown tag =
    Decode.map tag myEventDecoder
        |> Html.Events.onWithOptions "pointerdown" stopOptions


stopOptions : Html.Events.Options
stopOptions =
    { stopPropagation = True
    , preventDefault = True
    }

BEWARE that the minimalist elm-pep polyfill may not support all properties. So if you rely on it for compatibility with browsers not supporting pointer events, a decoder with an unsupported attribute will silently fail. If such a need arises, please open an issue in elm-pep.