事件處理器
幾乎全支持 Vue官方文檔:事件處理器
事件名稱 | 描述 | 是否包含 touches 數(shù)組 |
---|---|---|
touchstart | 觸摸開始薛训,多點觸控,后面的手指同樣會觸發(fā) | 是 |
touchmove | 接觸點改變茸炒,滑動時 | 是 |
touchend | 觸摸結(jié)束值依,手指離開屏幕時 | 是 |
touchcancel | 觸摸被取消哩簿,當(dāng)系統(tǒng)停止跟蹤觸摸的時候觸發(fā) | 否 |
// 事件映射表鸟雏,左側(cè)為 WEB 事件室抽,右側(cè)為 ``uni-app`` 對應(yīng)事件
{
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'
}
每個觸摸事件都包括了三個觸摸列表妒穴,每個列表里包含了對應(yīng)的一系列觸摸點(用來實現(xiàn)多點觸控):
1)touches:當(dāng)前位于屏幕上的所有手指的列表宋税。
2)targetTouches:位于當(dāng)前DOM元素上手指的列表。
3)changedTouches:涉及當(dāng)前事件手指的列表讼油。
每個 Touch 對象包含的屬性如下:
clientX:觸摸目標(biāo)在視口中的x坐標(biāo)杰赛。
clientY:觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier:標(biāo)識觸摸的唯一ID矮台。
pageX:觸摸目標(biāo)在頁面中的x坐標(biāo)乏屯。
pageY:觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX:觸摸目標(biāo)在屏幕中的x坐標(biāo)瘦赫。
screenY:觸摸目標(biāo)在屏幕中的y坐標(biāo)辰晕。
target:觸摸的DOM節(jié)點目標(biāo)。
踩坑注意:
事件映射表中沒有的原生事件也可以使用确虱,例如
map
組件的regionchange
事件直接在組件上寫成@regionchange
,同時這個事件也非常特殊含友,它的event
type
有begin
和end
兩個,導(dǎo)致我們無法在handleProxy
中區(qū)分到底是什么事件校辩,所以你在監(jiān)聽此類事件的時候同時監(jiān)聽事件名和事件類型既<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
平臺差異所致窘问,
bind
和catch
事件同時綁定時候,只會觸發(fā)bind
,catch
不會被觸發(fā)宜咒,要避免踩坑惠赫。-
事件修飾符
-
stop
的使用會阻止冒泡,但是同時綁定了一個非冒泡事件故黑,會導(dǎo)致該元素上的catchEventName
失效儿咱! -
prevent
可以直接干掉庭砍,因為uni-app
里沒有什么默認(rèn)事件,比如submit
并不會跳轉(zhuǎn)頁面 -
self
沒有可以判斷的標(biāo)識 -
once
也不能做概疆,因為uni-app
沒有removeEventListener
, 雖然可以直接在handleProxy
中處理逗威,但非常的不優(yōu)雅,違背了原意岔冀,暫不考慮
-
按鍵修飾符:
uni-app
運行在手機端,沒有鍵盤事件概耻,所以不支持按鍵修飾符使套。