事件

2020-04-28 10:19 更新

除了提供行為一致的組件外,我對組件事件回調(diào)中的參數(shù)也做了統(tǒng)一的處理。以 Input 組件的 onInput 回調(diào)為例:

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

不同于小程序中通過 e.detail.value 來取值,我們把 event 對象往標(biāo)準(zhǔn)的 DOM 事件做了抹平,以此來為將來做 H5 的同構(gòu)打下基礎(chǔ)。

注意:只有 remax/one 中的事件回調(diào)做了處理,平臺特定的組件以及平臺特定的屬性依然沿用小程序原來的事件對象。

Event

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

TouchEvent

繼承 Event 事件

名稱類型描述
touchesTouch[]包含了所有當(dāng)前接觸觸摸平面的觸點(diǎn)的 Touch 對象,無論它們的起始于哪個 element 上,也無論它們狀態(tài)是否發(fā)生了變化
changedTouchesTouch[]包含了代表所有從上一次觸摸事件到此次事件過程中,狀態(tài)發(fā)生了改變的觸點(diǎn)的 Touch 對象。

TouchStartEvent

繼承 TouchEvent 

TouchMoveEvent

繼承 TouchEvent

TouchEndEvent

繼承 TouchEvent

TouchCancelEvent

繼承 TouchEvent

ImageLoadEvent

繼承 Event

ImageErrorEvent

繼承 Event

TapEvent

繼承 Event

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

InputEvent

繼承 Event

FormEvent

繼承 Event

Target

名稱類型描述
idstring節(jié)點(diǎn) id
offsetLeftnumber左偏移量
offsetTopnumber頂部偏移量
dataset{ [key: string]: any }data 對象
valueany目標(biāo)值

CurrentTarget

名稱類型描述
idstring節(jié)點(diǎn) id
offsetLeftnumber左偏移量
offsetTopnumber頂部偏移量
dataset{ [key: string]: any }data 對象

Touch

名稱類型描述
clientXnumber觸點(diǎn)相對于可見視區(qū)左邊沿的的 X 坐標(biāo). 不包括任何滾動偏移
clientYnumber觸點(diǎn)相對于可見視區(qū)上邊沿的的 Y 坐標(biāo). 不包括任何滾動偏移
pageXnumber觸點(diǎn)相對于頁面左邊沿的的 X 坐標(biāo). 當(dāng)存在水平滾動的偏移時, 這個值包含了水平滾動的偏移
pageYnumber觸點(diǎn)相對于頁面左邊沿的的 Y 坐標(biāo). 當(dāng)存在垂直滾動的偏移時, 這個值包含了垂直滾動的偏移
identifiernumber一次觸摸動作在移動的整個過程中, 該標(biāo)識符不變. 可以根據(jù)它來判斷跟蹤的是否是同一次觸摸過程


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號