Skip to content

PointerEvent

鼠标、手写笔、触摸屏点击事件,支持 右键菜单 事件。

当原生 PointerEvent 事件不存在时,使用其他原生事件替代的优先级:

PointerEvent > TouchEvent > MouseEvent

新特性

多种点击事件同时只触发一个

tapdouble_taplong_tap 事件同时监听,根据实际情况默认只触发最匹配的一个, 也可以 配置 同时触发。

事件配对触发

元素 pointer.down 事件触发后,保证元素一定会触发 pointer.up 事件, 不用担心因为拖拽、事件取消等原因导致配对中断。

新增属性

leftmiddlerightspaceKey

右键菜单

PointerEvent.MENU

事件名称

基础事件

PointerEvent.DOWN

按下事件。

pointer.down

PointerEvent.MOVE

光标移动事件。

pointer.move

PointerEvent.UP

抬起事件。

pointer.up

PointerEvent.OVER

over 事件。

pointer.over

PointerEvent.OUT

out 事件。

pointer.out

PointerEvent.ENTER

进入事件。

pointer.enter

PointerEvent.LEAVE

离开事件。

pointer.leave

复合事件

PointerEvent.TAP

快速点击事件。

tap

PointerEvent.DOUBLE_TAP

快速双击事件。

double_tap

PointerEvent.LONG_PRESS

长按事件,长按中触发。

long_press

PointerEvent.LONG_TAP

长按抬起事件,长按 UP 后马上触发。

long_tap

PointerEvent.CLICK

点击事件, 推荐使用tap代替。

click

PointerEvent.DOUBLE_CLICK

双击事件,推荐使用double_tap代替。

double_click

右键菜单

PointerEvent.MENU

右键菜单事件,同 HTML 的 contextmenu 事件,按下时触发。

pointer.menu

PointerEvent.MENU_TAP

右键 tap 事件, 抬起后触发。

pointer.menu_tap

关键属性

x: number

世界坐标 中的 x 轴位置。

y: number

世界坐标 中的 y 轴位置。

width: number

接触面的宽度。

height: number

接触面的高度。

pointerType: string

触发事件的设备类型(鼠标,手写笔,触摸屏等):

  • "mouse"
  • "pen"
  • "touch"

pressure: number

按压的压力值,取值范围: 0 ~ 1.

tangentialPressure?: number

pen(手写笔) 按压的切向压力值,取值范围: -1 ~ 1.

当 pointerType 为 'pen' 时才存在此属性.

tiltX?: number

pen 与 y 轴构成的平面,和 y-z 平面之间的夹角, 取值范围: -90, 90.

tiltY?: number

pen 与 x 轴构成的平面,和 x-z 平面之间的夹角, 取值范围: -90, 90.

twist?: number

pen 围绕自身主轴顺时针旋转的角度,取值范围是 [0, 359] 度。

坐标转换方法

x, y 属性的坐标转换。

getPage ( ): IPointData

获取在 page 坐标系中的位置。

getInner ( relative?: UI): IPointData

获取相对于 relative 的 内部坐标,relative 不存在时为当前侦听元素。

getLocal ( relative?: UI): IPointData

获取相对于 relative 的 本地坐标,relative 不存在时为当前侦听元素。

继承

UIEvent

API

PointerEvent

示例

多种点击事件同时只触发一个

同时监听 tapdouble_taplong_tap 事件, 默认只会触发其中之一。

ts
import { Leafer, Rect, PointerEvent } from 'leafer-ui'

const leafer = new Leafer({
    view: window
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

rect.on(PointerEvent.TAP, () => { 
    console.log('tap')
})

rect.on(PointerEvent.DOUBLE_TAP, () => {
    console.log('double_tap')
})

rect.on(PointerEvent.LONG_TAP, () => {
    console.log('long_tap')
})

rect.on(PointerEvent.LONG_PRESS, () => {
    console.log('long_press')
})

同时派发多种点击事件

配置应用的 pointer.tapMore 为 true, tapdouble_taplong_tap 事件会同时触发。

ts
import { Leafer, Rect, PointerEvent } from 'leafer-ui'

const leafer = new Leafer({
    view: window,
    pointer: {
        tapMore: false 
    }
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

rect.on(PointerEvent.TAP, () => {
    console.log('tap')
})

rect.on(PointerEvent.DOUBLE_TAP, () => {
    console.log('double_tap')
})

rect.on(PointerEvent.LONG_TAP, () => {
    console.log('long_tap')
})

rect.on(PointerEvent.LONG_PRESS, () => {
    console.log('long_press')
})

Released under the MIT License.