事件

2020-04-28 10:19 更新

除了提供行为一致的组件外,我对组件事件回调中的参数也做了统一的处理。以 Input 组件的 onInput 回调为例:

import { Input } from 'remax/one';
export default () => {
const handleInput = event => {
console.log(event.target.value);
};
return <Input onInput={handleInput} />;
};

不同于小程序中通过 e.detail.value 来取值,我们把 event 对象往标准的 DOM 事件做了抹平,以此来为将来做 H5 的同构打下基础。

注意:只有 remax/one 中的事件回调做了处理,平台特定的组件以及平台特定的属性依然沿用小程序原来的事件对象。

Event

名称类型描述
targetTarget事件 target
currentTargetCurrentTarget事件 currentTarget
typestring事件类型, 如 'tap','focus' 等
originalEventany小程序原始事件对象

TouchEvent

继承 Event 事件

名称类型描述
touchesTouch[]包含了所有当前接触触摸平面的触点的 Touch 对象,无论它们的起始于哪个 element 上,也无论它们状态是否发生了变化
changedTouchesTouch[]包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的 Touch 对象。

TouchStartEvent

继承 TouchEvent 

TouchMoveEvent

继承 TouchEvent

TouchEndEvent

继承 TouchEvent

TouchCancelEvent

继承 TouchEvent

ImageLoadEvent

继承 Event

ImageErrorEvent

继承 Event

TapEvent

继承 Event

名称类型描述
stopPropagation() => void阻止事件冒泡

InputEvent

继承 Event

FormEvent

继承 Event

Target

名称类型描述
idstring节点 id
offsetLeftnumber左偏移量
offsetTopnumber顶部偏移量
dataset{ [key: string]: any }data 对象
valueany目标值

CurrentTarget

名称类型描述
idstring节点 id
offsetLeftnumber左偏移量
offsetTopnumber顶部偏移量
dataset{ [key: string]: any }data 对象

Touch

名称类型描述
clientXnumber触点相对于可见视区左边沿的的 X 坐标. 不包括任何滚动偏移
clientYnumber触点相对于可见视区上边沿的的 Y 坐标. 不包括任何滚动偏移
pageXnumber触点相对于页面左边沿的的 X 坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移
pageYnumber触点相对于页面左边沿的的 Y 坐标. 当存在垂直滚动的偏移时, 这个值包含了垂直滚动的偏移
identifiernumber一次触摸动作在移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号