事件处理器
几乎全支持 Vue官方文档:事件处理器
事件名称 | 描述 | 是否包含 touches 数组 |
---|---|---|
touchstart | 触摸开始,多点触控,后面的手指同样会触发 | 是 |
touchmove | 接触点改变,滑动时 | 是 |
touchend | 触摸结束,手指离开屏幕时 | 是 |
touchcancel | 触摸被取消,当系统停止跟踪触摸的时候触发 | 否 |
// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}
每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
1)touches:当前位于屏幕上的所有手指的列表。
2)targetTouches:位于当前DOM元素上手指的列表。
3)changedTouches:涉及当前事件手指的列表。
每个 Touch 对象包含的属性如下:
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
踩坑注意:
事件映射表中没有的原生事件也可以使用,例如
map
组件的regionchange
事件直接在组件上写成@regionchange
,同时这个事件也非常特殊,它的event
type
有begin
和end
两个,导致我们无法在handleProxy
中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
平台差异所致,
bind
和catch
事件同时绑定时候,只会触发bind
,catch
不会被触发,要避免踩坑。-
事件修饰符
-
stop
的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的catchEventName
失效! -
prevent
可以直接干掉,因为uni-app
里没有什么默认事件,比如submit
并不会跳转页面 -
self
没有可以判断的标识 -
once
也不能做,因为uni-app
没有removeEventListener
, 虽然可以直接在handleProxy
中处理,但非常的不优雅,违背了原意,暂不考虑
-
按键修饰符:
uni-app
运行在手机端,没有键盘事件,所以不支持按键修饰符。