Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5854
Star 86
Fork 160
H
hello uni-app x

体验新版 GitCode，发现更多精彩内容 >>

提交 855315f3 编写于 作者: W wanganxp
浏览文件
操作

补充event的id

上级 dd8e5867
隐藏空白更改
内联 并排
Showing with 189 addition and 255 deletion
pages/component/general-event/general-event.uvue
浏览文件 @ 855315f3
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view> <page-head title="触摸方块测试相关事件"></page-head>
<page-head :title="title"></page-head> <view class="uni-padding-wrap uni-common-mt container">
<view class="uni-padding-wrap uni-common-mt container"> <view class="target" @touchstart="onTouchStart" @touchcancel="onTouchCancel" @touchmove="onTouchMove"
<view @touchend="onTouchEnd" @tap="onTap" @click="onClick" @longpress="onLongPress"></view>
class="target" <view v-if="touchStartEvent !== null">
@touchstart="onTouchStart" <text class="title1">touchStart Event: </text>
@touchcancel="onTouchCancel" <text class="title2">touches: </text>
@touchmove="onTouchMove" <template v-for="(touch, index) in touchStartEvent!.touches" :key="index">
@touchend="onTouchEnd" <text class="title3">touch[{{ index }}]:</text>
@tap="onTap" <text>identifier: {{touch.identifier}}</text>
@click="onClick" <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
@longpress="onLongPress" <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
></view> <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
<view v-if="touchStartEvent !== null"> </template>
<text class="title1">touchStart Event: </text> <text class="title2 uni-common-mt">changedTouches: </text>
<text class="title2">touches: </text> <template v-for="(touch, index) in touchStartEvent!.changedTouches" :key="index">
<template <text class="title3">touch[{{ index }}]:</text>
v-for="(touch, index) in touchStartEvent!.touches" <text>identifier: {{touch.identifier}}</text>
:key="index" <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
> <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
<text class="title3">touch[{{ index }}]:</text> <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> </template>
<text </view>
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text <view v-if="touchCancelEvent !== null">
> <text class="title1">touchCancel Event: </text>
<text <text class="title2">touches: </text>
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text <template v-for="(touch, index) in touchCancelEvent!.touches" :key="index">
> <text class="title3">touch[{{ index }}]:</text>
</template> <text>identifier: {{touch.identifier}}</text>
<text class="title2 uni-common-mt">changedTouches: </text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<template <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
v-for="(touch, index) in touchStartEvent!.changedTouches" <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
:key="index" </template>
> <text class="title2 uni-common-mt">changedTouches: </text>
<text class="title3">touch[{{ index }}]:</text> <template v-for="(touch, index) in touchCancelEvent!.changedTouches" :key="index">
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text class="title3">touch[{{ index }}]:</text>
<text <text>identifier: {{touch.identifier}}</text>
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
> <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
<text <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text </template>
> </view>
</template> <view v-if="touchMoveEvent !== null">
</view> <text class="title1">touchMove Event: </text>
<view v-if="touchCancelEvent !== null"> <text class="title2">touches: </text>
<text class="title1">touchCancel Event: </text> <template v-for="(touch, index) in touchMoveEvent!.touches" :key="index">
<text class="title2">touches: </text> <text class="title3">touch[{{ index }}]:</text>
<template <text>identifier: {{touch.identifier}}</text>
v-for="(touch, index) in touchCancelEvent!.touches" <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
:key="index" <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
> <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
<text class="title3">touch[{{ index }}]:</text> </template>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text class="title2 uni-common-mt">changedTouches: </text>
<text <template v-for="(touch, index) in touchMoveEvent!.changedTouches" :key="index">
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text <text class="title3">touch[{{ index }}]:</text>
> <text>identifier: {{touch.identifier}}</text>
<text <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
> <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
</template> </template>
<text class="title2 uni-common-mt">changedTouches: </text> </view>
<template <view v-if="longPressEvent !== null">
v-for="(touch, index) in touchCancelEvent!.changedTouches" <text class="title1">longPress Event: </text>
:key="index" <text class="title2">touches: </text>
> <template v-if="longPressEvent!.touches.length > 0" v-for="(touch, index) in longPressEvent!.touches"
<text class="title3">touch[{{ index }}]:</text> :key="index">
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text class="title3">touch[{{ index }}]:</text>
<text <text>identifier: {{touch.identifier}}</text>
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
> <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
<text <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text </template>
> <text class="title2 uni-common-mt">changedTouches: </text>
</template> <template v-for="(touch, index) in longPressEvent!.changedTouches" :key="index">
</view> <text class="title3">touch[{{ index }}]:</text>
<view v-if="touchMoveEvent !== null"> <text>identifier: {{touch.identifier}}</text>
<text class="title1">touchMove Event: </text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text class="title2">touches: </text> <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
<template <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
v-for="(touch, index) in touchMoveEvent!.touches" </template>
:key="index" </view>
> <view v-if="touchEndEvent !== null">
<text class="title3">touch[{{ index }}]:</text> <text class="title1">touchEnd Event: </text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text class="title2">touches: </text>
<text <template v-if="touchEndEvent!.touches.length > 0" v-for="(touch, index) in touchEndEvent!.touches"
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text :key="index">
> <text class="title3">touch[{{ index }}]:</text>
<text <text>identifier: {{touch.identifier}}</text>
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
> <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
</template> <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
<text class="title2 uni-common-mt">changedTouches: </text> </template>
<template <text class="title2 uni-common-mt">changedTouches: </text>
v-for="(touch, index) in touchMoveEvent!.changedTouches" <template v-for="(touch, index) in touchEndEvent!.changedTouches" :key="index">
:key="index" <text class="title3">touch[{{ index }}]:</text>
> <text>identifier: {{touch.identifier}}</text>
<text class="title3">touch[{{ index }}]:</text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
<text <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text </template>
> </view>
<text <view v-if="tapEvent !== null">
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text <text class="title1">tap Event: </text>
> <text>x: {{ tapEvent!.x }}, y: {{ tapEvent!.y }}</text>
</template> </view>
</view> <view v-if="clickEvent !== null">
<view v-if="longPressEvent !== null"> <text class="title1">click Event: </text>
<text class="title1">longPress Event: </text> <text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</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>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</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>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</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>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</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>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text
>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</template>
</view>
<view v-if="tapEvent !== null">
<text class="title1">tap Event: </text>
<text>x: {{ tapEvent!.x }}, y: {{ tapEvent!.y }}</text>
</view>
<view v-if="clickEvent !== null">
<text class="title1">click Event: </text>
<text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
</view>
</view> </view>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
export default { export default {
data() { data() {
return { return {
title: 'general-event', title: 'general-event',
onTouchStartTime: 0, onTouchStartTime: 0,
touchStartEvent: null as TouchEvent | null, touchStartEvent: null as TouchEvent | null,
touchCancelEvent: null as TouchEvent | null, touchCancelEvent: null as TouchEvent | null,
onTouchMoveTime: 0, onTouchMoveTime: 0,
touchMoveEvent: null as TouchEvent | null, touchMoveEvent: null as TouchEvent | null,
onTouchEndTime: 0, onTouchEndTime: 0,
longPressEvent: null as TouchEvent | null, longPressEvent: null as TouchEvent | null,
touchEndEvent: null as TouchEvent | null, touchEndEvent: null as TouchEvent | null,
onTapTime: 0, onTapTime: 0,
tapEvent: null as MouseEvent | null, tapEvent: null as MouseEvent | null,
onClickTime: 0, onClickTime: 0,
clickEvent: null as MouseEvent | null, clickEvent: null as MouseEvent | null,
onLongPressTime: 0, onLongPressTime: 0,
} }
},
methods: {
onTouchStart(e: TouchEvent){
this.touchStartEvent = e
this.onTouchStartTime = Date.now()
console.log('onTouchStart')
},
onTouchCancel(e: TouchEvent){
this.touchCancelEvent = e
console.log('onTouchCancel')
}, },
onTouchMove(e: TouchEvent){ methods: {
this.touchMoveEvent = e onTouchStart(e : TouchEvent) {
this.onTouchMoveTime = Date.now() this.touchStartEvent = e
console.log('onTouchMove') this.onTouchStartTime = Date.now()
console.log('onTouchStart')
},
onTouchCancel(e : TouchEvent) {
this.touchCancelEvent = e
console.log('onTouchCancel')
},
onTouchMove(e : TouchEvent) {
this.touchMoveEvent = e
this.onTouchMoveTime = Date.now()
console.log('onTouchMove')
},
onLongPress(e : TouchEvent) {
this.longPressEvent = e
this.onLongPressTime = Date.now()
console.log('onLongPress')
},
onTouchEnd(e : TouchEvent) {
this.touchEndEvent = e
this.onTouchEndTime = Date.now()
console.log('onTouchEnd')
},
onTap(e : MouseEvent) {
this.tapEvent = e
this.onTapTime = Date.now()
console.log('onTap')
},
onClick(e : MouseEvent) {
this.clickEvent = e
this.onClickTime = Date.now()
console.log('onClick')
},
}, },
onLongPress(e: TouchEvent){ }
this.longPressEvent = e
this.onLongPressTime = Date.now()
console.log('onLongPress')
},
onTouchEnd(e: TouchEvent){
this.touchEndEvent = e
this.onTouchEndTime = Date.now()
console.log('onTouchEnd')
},
onTap(e: MouseEvent){
this.tapEvent = e
this.onTapTime = Date.now()
console.log('onTap')
},
onClick(e: MouseEvent){
this.clickEvent = e
this.onClickTime = Date.now()
console.log('onClick')
},
},
}
</script> </script>
<style> <style>
.container { .container {
padding-bottom: 1000px; padding-bottom: 10px;
} }
.target {
margin: 20px 0 0 50px; .target {
width: 200px; margin: 20px 0 0 50px;
height: 100px; width: 200px;
background-color: aqua; height: 100px;
} background-color: aqua;
.title1 { }
margin-top: 15px;
font-size: 20px; .title1 {
} margin-top: 15px;
.title2 { font-size: 20px;
margin-top: 10px; }
font-size: 18px;
} .title2 {
.title3 { margin-top: 10px;
margin-top: 5px; font-size: 18px;
font-size: 16px; }
}
.title3 {
margin-top: 5px;
font-size: 16px;
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或