W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
通用事件,即所有組件都支持的?事件回調(diào)
?
開發(fā)者可以在組件標簽上使用?on{eventName}
?(如?onclick
?)或?@{eventName}
?(如?@click
?)注冊回調(diào)事件
更詳細的講解,可查閱 事件綁定文檔 了解
<template>
<div>
<text onclick="clickFunction1">line 1</text>
<text @click="clickFunction2">line 2</text>
</div>
</template>
名稱 | 參數(shù) | 描述 | 冒泡 |
---|---|---|---|
touchstart 1030+
|
TouchEvent | 手指剛觸摸組件時觸發(fā) | 1040+ |
touchmove 1030+
|
TouchEvent | 手指觸摸后移動時觸發(fā) | 1040+ |
touchend 1030+
|
TouchEvent | 手指觸摸動作結(jié)束時觸發(fā) | 1040+ |
touchcancel 1030+
|
TouchEvent | 手指觸摸動作被打斷時觸發(fā)。如:來電、彈窗 | 1040+ |
click | MouseEvent 1050+
|
組件被點擊時觸發(fā) | 1040+ |
longpress | MouseEvent 1050+
|
組件被長按時觸發(fā) | 1040+ |
focus | - | 組件獲得焦點時觸發(fā) | 不支持 |
blur | - | 組件失去焦點時觸發(fā) | 不支持 |
appear | - | 組件出現(xiàn)時觸發(fā) | 不支持 |
disappear | - | 組件消失時觸發(fā) | 不支持 |
swipe 1000+
|
{direction:[left | right | up | down ]} |
組件上快速滑動后觸發(fā)。
參數(shù)說明: left: 向左滑動; right: 向右滑動; up: 向上滑動; down:向下滑動。 |
不支持 |
resize 1050+
|
{offsetWidth: offsetWidthValue, offsetHeight: offsetHeightValue, offsetLeft: offsetLeftValue, offsetTop: offsetTopValue} | 組件大小改變后觸發(fā) | 不支持 |
1040+ 版本對某些通用事件開放了冒泡功能,這些事件的響應(yīng)行為與之前版本差異較大。因此為了兼容之前版本,開發(fā)者需要在 manifest.json 中將 minPlatformVersion 設(shè)置為 1040 或以上,才會啟用這類通用事件的冒泡功能。
關(guān)于事件冒泡及阻止事件冒泡詳細案例,請參考:事件監(jiān)聽
屬性 | 類型 | 說明 |
---|---|---|
touches | TouchList | 觸摸事件,當前停留在屏幕中的觸摸點信息的數(shù)組 |
changedTouches | TouchList | 觸摸事件,當前變化的觸摸點信息的數(shù)組.changedTouches 數(shù)據(jù)格式同 touches, 表示有變化的觸摸點,如從無變有(touchstart),位置變化(touchmove),從有變無(touchend、touchcancel),
比如用戶手指離開屏幕時,touches 數(shù)組中無數(shù)據(jù),而 changedtouches 則會保存離開前的數(shù)據(jù) |
其中,TouchList 是 Touch 對象的集合。
屬性 | 類型 | 說明 | |||
---|---|---|---|---|---|
identifier | number | 觸摸點的標識符。對于多點同時觸摸則是 0,1[,2,3,...],分別表示第一個手指、第二個手指...。
一次觸摸動作(手指按下到手指離開的過程),在整個屏幕移動過程中,該標識符不變,可以用來判斷是否是同一次觸摸過程 |
|||
clientX | number | 距離可見區(qū)域左邊沿的 X 軸坐標,不包含任何滾動偏移。 | |||
clientY | number | 距離可見區(qū)域上邊沿的 Y 軸坐標,不包含任何滾動偏移以及狀態(tài)欄和 titlebar 的高度。 | |||
pageX | number | 距離可見區(qū)域左邊沿的 X 軸坐標,包含任何滾動偏移。 | |||
pageY | number | 距離可見區(qū)域上邊沿的 Y 軸坐標,包含任何滾動偏移。(不包含狀態(tài)欄和 titlebar 的高度) | |||
offsetX | number | 距離事件觸發(fā)對象左邊沿 X 軸的距離 | |||
offsetY | number | 距離事件觸發(fā)對象上邊沿 Y 軸的距離 |
屬性 | 類型 | 說明 | ||||
---|---|---|---|---|---|---|
clientX | number | 距離可見區(qū)域左邊沿的 X 軸坐標,不包含任何滾動偏移 | ||||
clientY | number | 距離可見區(qū)域上邊沿的 Y 軸坐標,不包含任何滾動偏移以及狀態(tài)欄和 titlebar 的高度 | ||||
pageX | number | 距離可見區(qū)域左邊沿的 X 軸坐標,包含任何滾動偏移 | ||||
pageY | number | 距離可見區(qū)域上邊沿的 Y 軸坐標,包含任何滾動偏移。(不包含狀態(tài)欄和 titlebar 的高度) | ||||
offsetX | number | 距離事件觸發(fā)對象左邊沿 X 軸的距離 | ||||
offsetY | number | 距離事件觸發(fā)對象上邊沿 Y 軸的距離 |
如下,在 div 上綁定了 click 和 touchmove 事件,觸發(fā)事件時將事件打印出來。
<template>
<div class="root-page">
<div class="touch-region" onclick="click" ontouchmove="move"></div>
</div>
</template>
<style>
.root-page {
flex-direction: column;
align-items: center;
}
.touch-region {
width: 80%;
height: 20%;
background-color: #444444;
}
</style>
<script>
export default {
private: {},
click(event) {
console.log("click event fired")
},
move(event) {
console.log("move event touches:" + JSON.stringify(event.touches))
console.log("move event changedTouches:" + JSON.stringify(event.changedTouches))
}
}
</script>
打印結(jié)果如下,click 事件:
move event touches:[
{
"offsetX": 296,
"identifier": 0,
"offsetY": 113.48148345947266,
"clientY": 113.48148345947266,
"clientX": 360,
"pageY": 113.48148345947266,
"pageX": 360
}
]
move event changedTouches:[
{
"offsetX": 296,
"identifier": 0,
"offsetY": 113.48148345947266,
"clientY": 113.48148345947266,
"clientX": 360,
"pageY": 113.48148345947266,
"pageX": 360
}
]
click event fired
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: