<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<page-head title="触摸方块测试相关事件"></page-head>
<view class="uni-padding-wrap uni-common-mt container">
<view class="target" id="touch-target" @touchstart="onTouchStart" @touchcancel="onTouchCancel"
@touchmove="onTouchMove" @touchend="onTouchEnd"></view>
<view class="target" id="longpress-target" @tap="onTap" @click="onClick" @longpress="onLongPress"></view>
<view v-if="touchStartEvent !== null">
<text class="title1">touchStart Event: </text>
<text class="title2">touches: </text>
<template v-for="(touch, index) in touchStartEvent!.touches" :key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="touch-start-touch-identifier">{{
touch.identifier
}}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="touch-start-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="touch-start-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="touch-start-touch-client-x">{{ touch.clientX }}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="touch-start-touch-client-y">{{ touch.clientY }}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="touch-start-touch-screen-x">{{ touch.screenX }}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="touch-start-touch-screen-y">{{ touch.screenY }}</text>
</view>
</template>
<text class="title2 uni-common-mt">changedTouches: </text>
<template v-for="(touch, index) in touchStartEvent!.changedTouches" :key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="touch-start-changed-touch-identifier">{{
touch.identifier
}}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="touch-start-changed-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="touch-start-changed-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="touch-start-changed-touch-client-x">{{
touch.clientX
}}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="touch-start-changed-touch-client-y">{{
touch.clientY
}}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="touch-start-changed-touch-screen-x">{{
touch.screenX
}}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="touch-start-changed-touch-screen-y">{{
touch.screenY
}}</text>
</view>
</template>
</view>
<view v-if="touchCancelEvent !== null">
<text class="title1">touchCancel Event: </text>
<text class="title2">touches: </text>
<template v-for="(touch, index) in touchCancelEvent!.touches" :key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="touch-cancel-touch-identifier">{{
touch.identifier
}}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="touch-cancel-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="touch-cancel-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="touch-cancel-touch-client-x">{{ touch.clientX }}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="touch-cancel-touch-client-y">{{ touch.clientY }}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="touch-cancel-touch-screen-x">{{ touch.screenX }}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="touch-cancel-touch-screen-y">{{ touch.screenY }}</text>
</view>
</template>
<text class="title2 uni-common-mt">changedTouches: </text>
<template v-for="(touch, index) in touchCancelEvent!.changedTouches" :key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="touch-cancel-changed-touch-identifier">{{
touch.identifier
}}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="touch-cancel-changed-touch-page-x">{{
touch.pageX
}}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="touch-cancel-changed-touch-page-y">{{
touch.pageY
}}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="touch-cancel-changed-touch-client-x">{{
touch.clientX
}}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="touch-cancel-changed-touch-client-y">{{
touch.clientY
}}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="touch-cancel-changed-touch-screen-x">{{
touch.screenX
}}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="touch-cancel-changed-touch-screen-y">{{
touch.screenY
}}</text>
</view>
</template>
</view>
<view v-if="touchMoveEvent !== null">
<text class="title1">touchMove Event: </text>
<text class="title2">touches: </text>
<template v-for="(touch, index) in touchMoveEvent!.touches" :key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="touch-move-touch-identifier">{{ touch.identifier }}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="touch-move-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="touch-move-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="touch-move-touch-client-x">{{ touch.clientX }}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="touch-move-touch-client-y">{{ touch.clientY }}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="touch-move-touch-screen-x">{{ touch.screenX }}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="touch-move-touch-screen-y">{{ touch.screenY }}</text>
</view>
</template>
<text class="title2 uni-common-mt">changedTouches: </text>
<template v-for="(touch, index) in touchMoveEvent!.changedTouches" :key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="touch-move-changed-touch-identifier">{{
touch.identifier
}}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="touch-move-changed-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="touch-move-changed-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="touch-move-changed-touch-client-x">{{
touch.clientX
}}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="touch-move-changed-touch-client-y">{{
touch.clientY
}}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="touch-move-changed-touch-screen-x">{{
touch.screenX
}}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="touch-move-changed-touch-screen-y">{{
touch.screenY
}}</text>
</view>
</template>
</view>
<view v-if="touchEndEvent !== null">
<text class="title1">touchEnd Event: </text>
<text class="title2">touches: </text>
<template v-if="touchEndEvent!.touches.length > 0" v-for="(touch, index) in touchEndEvent!.touches"
:key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="touch-end-touch-identifier">{{ touch.identifier }}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="touch-end-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="touch-end-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="touch-end-touch-client-x">{{ touch.clientX }}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="touch-end-touch-client-y">{{ touch.clientY }}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="touch-end-touch-screen-x">{{ touch.screenX }}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="touch-end-touch-screen-y">{{ touch.screenY }}</text>
</view>
</template>
<text class="title2 uni-common-mt">changedTouches: </text>
<template v-for="(touch, index) in touchEndEvent!.changedTouches" :key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="touch-end-changed-touch-identifier">{{
touch.identifier
}}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="touch-end-changed-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="touch-end-changed-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="touch-end-changed-touch-client-x">{{
touch.clientX
}}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="touch-end-changed-touch-client-y">{{
touch.clientY
}}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="touch-end-changed-touch-screen-x">{{
touch.screenX
}}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="touch-end-changed-touch-screen-y">{{
touch.screenY
}}</text>
</view>
</template>
</view>
<view v-if="longPressEvent !== null">
<text class="title1">longPress Event: </text>
<text class="title2">touches: </text>
<template v-if="longPressEvent!.touches.length > 0" v-for="(touch, index) in longPressEvent!.touches"
:key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="long-press-touch-identifier">{{ touch.identifier }}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="long-press-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="long-press-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="long-press-touch-client-x">{{ touch.clientX }}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="long-press-touch-client-y">{{ touch.clientY }}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="long-press-touch-screen-x">{{ touch.screenX }}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="long-press-touch-screen-y">{{ touch.screenY }}</text>
</view>
</template>
<text class="title2 uni-common-mt">changedTouches: </text>
<template v-for="(touch, index) in longPressEvent!.changedTouches" :key="index">
<text class="title3">touch[{{ index }}]:</text>
<view class="uni-list-cell">
<text>identifier: </text>
<text id="long-press-changed-touch-identifier">{{
touch.identifier
}}</text>
</view>
<view class="uni-list-cell">
<text>pageX: </text>
<text id="long-press-changed-touch-page-x">{{ touch.pageX }}</text>
</view>
<view class="uni-list-cell">
<text>pageY: </text>
<text id="long-press-changed-touch-page-y">{{ touch.pageY }}</text>
</view>
<view class="uni-list-cell">
<text>clientX: </text>
<text id="long-press-changed-touch-client-x">{{
touch.clientX
}}</text>
</view>
<view class="uni-list-cell">
<text>clientY: </text>
<text id="long-press-changed-touch-client-y">{{
touch.clientY
}}</text>
</view>
<view class="uni-list-cell">
<text>screenX: </text>
<text id="long-press-changed-touch-screen-x">{{
touch.screenX
}}</text>
</view>
<view class="uni-list-cell">
<text>screenY: </text>
<text id="long-press-changed-touch-screen-y">{{
touch.screenY
}}</text>
</view>
</template>
</view>
<view v-if="tapEvent !== null">
<text class="title1">tap Event: </text>
<view class="uni-list-cell">
<text>x: </text>
<text id="tap-event-x">{{ tapEvent!.x }}</text>
</view>
<view class="uni-list-cell">
<text>y: </text>
<text id="tap-event-y">{{ tapEvent!.y }}</text>
</view>
</view>
<view v-if="clickEvent !== null">
<text class="title1">click Event: </text>
<view class="uni-list-cell">
<text>x: </text>
<text id="click-event-x">{{ clickEvent!.x }}</text>
</view>
<view class="uni-list-cell">
<text>y: </text>
<text id="click-event-y">{{ clickEvent!.y }}</text>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
title: 'global-events',
touchStartEvent: null as TouchEvent | null,
touchCancelEvent: null as TouchEvent | null,
touchMoveEvent: null as TouchEvent | null,
longPressEvent: null as TouchEvent | null,
touchEndEvent: null as TouchEvent | null,
tapEvent: null as PointerEvent | null,
clickEvent: null as PointerEvent | null,
}
},
methods: {
onTouchStart(e : TouchEvent) {
this.touchStartEvent = e
console.log('onTouchStart', e)
},
onTouchCancel(e : TouchEvent) {
this.touchCancelEvent = e
console.log('onTouchCancel')
},
onTouchMove(e : TouchEvent) {
this.touchMoveEvent = e
console.log('onTouchMove', e)
},
onLongPress(e : TouchEvent) {
this.longPressEvent = e
console.log('onLongPress', e)
},
onTouchEnd(e : TouchEvent) {
this.touchEndEvent = e
console.log('onTouchEnd', e)
},
onTap(e : PointerEvent) {
this.tapEvent = e
console.log('onTap', e)
},
onClick(e : PointerEvent) {
this.clickEvent = e
console.log('onClick', e)
}
},
}
</script>
<style>
.container {
padding-bottom: 10px;
}
.target {
margin: 20px 0 0 50px;
width: 200px;
height: 100px;
background-color: aqua;
}
.title1 {
margin-top: 15px;
font-size: 20px;
}
.title2 {
margin-top: 10px;
font-size: 18px;
}
.title3 {
margin-top: 5px;
font-size: 16px;
}
</style>
