uni-app 安卓端nvue监听手势操作问题：安卓端touchend监听不到，ios端正常，视频播放插件全屏状态下一直未解决
uni-app 安卓端nvue监听手势操作问题：安卓端touchend监听不到，ios端正常，视频播放插件全屏状态下一直未解决
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 1 | HBuilderX |
产品分类：
uniapp/App
PC开发环境操作系统：
Windows
PC开发环境操作系统版本号：
1
HBuilderX类型：
正式
HBuilderX版本号：
3.4.18
手机系统：
Android
手机系统版本号：
Android 12
手机厂商：
一加，华为
手机机型：
一加八
页面类型：
nvue
vue版本：
vue2
打包方式：
云端
项目创建方式：
HBuilderX
### 示例代码：
```html
<template>
<div
class="detailVideo"
@touchstart="
e => {
return touchStart(e, 'Android');
}
"
@touchmove="touchmove"
@touchend="
e => {
return touchend(e, 'Android');
}
"
@touchcancel="touchcancel"
>
<div class="headerTitle" :style="{ height: iStatusBarHeight + 'rpx' }"></div>
<div class="header-top">
<image @click="getBack" class="img" src="../../static/img/video/back.png" mode=""></image>
<text class="header-item">{{ Videotitle }}</text>
<text class="header-items"></text>
</div>
<div style="height: 500rpx; width: 100%;"></div>
<KJ-HikVideoPlayer
@touchstart="
e => {
return touchStart(e, 'iOS');
}
"
@touchend="
e => {
return touchend(e, 'iOS');
}
"
ref="HikVideoPlayer"
:class="full == 1 ? 'EZOpen_full' : 'EZOpen'"
:style="{ width: '100%', height: palyerHeight, top: full == 1 ? 0 : iStatusBarHeight + 92 + 'rpx' }"
@player="er"
@intercomClient="onIntercomClient"
></KJ-HikVideoPlayer>
<div class="mask-ios" v-if="full == 0">
<div class="left-mask">
<image v-if="status.ipcType == '1'" style="width: 50upx;height: 50upx;margin:0 20upx;" src="../../static/img/video/qiang1.png" mode=""></image>
<image v-else-if="status.ipcType == '2'" style="width: 50upx;height: 50upx;margin:0 20upx;" src="../../static/img/video/qiu1.png" mode=""></image>
<image v-else-if="status.ipcType == '3'" style="width: 40upx;height: 40upx;margin:0 20upx;" src="../../static/img/video/danb-hui.png" mode=""></image>
</div>
<div class="right-mask">
<image @click="full_video" class="mask-ios-img" src="../../static/img/video/da.png" mode=""></image>
<image @click="capturePicture(false)" class="mask-ios-img" src="../../static/img/video/jiandao.png" mode=""></image>
<image @click="handplatback" class="mask-ios-img" src="../../static/img/video/hui.png" mode=""></image>
<image @click="handSwitchvideo('1')" class="mask-ios-img" v-if="Sdhd == '0'" src="../../static/img/video/hd.png" mode=""></image>
<image @click="handSwitchvideo('0')" class="mask-ios-img" v-else src="../../static/img/video/sd.png" mode=""></image>
<image v-if="clip" @click="handClip(1)" class="mask-ios-img" src="../../static/img/video/shexiangji.png" mode=""></image>
<div class="cliptime" @click="handClip(2)" v-else>
<div class="clip-t">
<text class="text">{{ time < 10 ? '0' + time : time }}</text>
</div>
</div>
</div>
</div>
<view class="mask-pos" v-else-if="full == 1 && Fullscreen">
<image @click="exitfull_video" class="images3" src="../../static/img/video/xiao.png" mode=""></image>
<image @click="capturePicture(false)" class="images3" src="../../static/img/video/jiandao.png" mode=""></image>
<image v-if="clip" @click="handClip(1)" class="images3" src="../../static/img/video/shexiangji.png" mode=""></image>
<div class="cliptime1" @click="handClip(2)" v-else>
<div class="clip-t1">
<text class="text">{{ time < 10 ? '0' + time : time }}</text>
</div>
</div>
<image class="images3" @click="bianbeijian" src="../../static/img/video/zoomjian.png" mode=""></image>
<image class="images3" @click="bianbeijia" src="../../static/img/video/zoomjia.png" mode=""></image>
<image @click="down(1)" @touchend="up(1)" class="content-img" src="../../static/img/video/tp.png" mode=""></image>
<image v-if="discolor" class="content-img" src="../../static/img/video/top-1.png" mode=""></image>
<image @click="down(2)" @touchend="up(2)" class="content-img1" src="../../static/img/video/rt.png" mode=""></image>
<image v-if="discolor2" class="content-img1" src="../../static/img/video/right-1.png" mode=""></image>
<image @click="down(3)" @touchend="up(3)" class="content-img2" src="../../static/img/video/bot.png" mode=""></image>
<image v-if="discolor3" class="content-img2" src="../../static/img/video/bot-1.png" mode=""></image>
<image @click="down(4)" @touchend="up(4)" class="content-img3" src="../../static/img/video/lt.png" mode=""></image>
<image v-if="discolor4" class="content-img3" src="../../static/img/video/left-1.png" mode=""></image>
</view>
<div class="middle">
<div class="middle-content">
<image @touchstart="down(1)" @touchend="up(1)" class="content-img" src="../../static/img/video/shadowon.png" mode=""></image>
<image v-if="discolor" class="content-img" src="../../static/img/video/brighton.png" mode=""></image>
<image @touchstart="down(2)" @touchend="up(2)" class="content-img1" src="../../static/img/video/shadowright.png" mode=""></image>
<image v-if="discolor2" class="content-img1" src="../../static/img/video/brightright.png" mode=""></image>
<image @touchstart="down(3)" @touchend="up(3)" class="content-img2" src="../../static/img/video/shadowdown.png" mode=""></image>
<image v-if="discolor3" class="content-img2" src="../../static/img/video/brightdown.png" mode=""></image>
<image @touchstart="down(4)" @touchend="up(4)" class="content-img3" src="../../static/img/video/shadowleft.png" mode=""></image>
<image v-if="discolor4" class="content-img3" src="../../static/img/video/brightleft.png" mode=""></image>
</div>
<div class="soleBase">
<div class="zoom1" @click="bianbeijia">
<image class="zoom1-img" src="../../static/img/video/bianbei.png" mode=""></image>
<text class="zoom1-text">变倍+</text>
</div>
<div class="zoom1" @click="bianbeijian">
<image class="zoom1-img" src="../../static/img/video/bianbei1.png" mode=""></image>
<text class="zoom1-text">变倍-</text>
</div>
<div class="zoom1" @click="bianjiaojia">
<image class="zoom1-img" src="../../static/img/video/bianjiao1.png" mode=""></image>
<text class="zoom1-text">变焦+</text>
</div>
<div class="zoom1" @click="bianjiaojian">
<image class="zoom1-img" src="../../static/img/video/bianjiao2.png" mode=""></image>
<text class="zoom1-text">变焦-</text>
</div>
</div>
</div>
</div>
</template>
更多关于uni-app 安卓端nvue监听手势操作问题：安卓端touchend监听不到，ios端正常，视频播放插件全屏状态下一直未解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4 回复
andorid 11可以，没有机型测试12
更多关于uni-app 安卓端nvue监听手势操作问题：安卓端touchend监听不到，ios端正常，视频播放插件全屏状态下一直未解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在使用 uni-app 开发应用时，尤其是在 nvue 页面中，监听手势操作可能会遇到一些问题，特别是在安卓设备上 touchend 事件无法正常触发的情况。以下是一些可能的原因和解决方案：
1. touchend 事件无法触发的原因
在安卓设备上，touchend 事件可能无法正常触发的原因通常与以下几个方面有关：
- 事件冒泡或捕获问题：在某些情况下，事件可能没有正确地冒泡或捕获到目标元素。
- 手势冲突：某些手势操作可能会与系统或其他插件的手势冲突，导致
touchend事件无法触发。 - 全屏模式下的问题：在全屏模式下，尤其是视频播放插件全屏时，系统可能会接管部分手势事件，导致
touchend事件无法正常触发。
2. 解决方案
2.1 使用 touchstart 和 touchmove 事件
如果 touchend 事件无法触发，可以尝试使用 touchstart 和 touchmove 事件来模拟手势操作。你可以在 touchstart 中记录起始位置，在 touchmove 中计算手势的偏移量，并在 touchend 中处理手势结束的逻辑。
<template>
<view @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
<!-- 内容 -->
</view>
</template>
<script>
export default {
data() {
return {
startX: 0,
startY: 0,
};
},
methods: {
handleTouchStart(event) {
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
},
handleTouchMove(event) {
const currentX = event.touches[0].clientX;
const currentY = event.touches[0].clientY;
const deltaX = currentX - this.startX;
const deltaY = currentY - this.startY;
// 处理手势移动逻辑
},
handleTouchEnd(event) {
// 处理手势结束逻辑
},
},
};
</script>
2.2 使用 GestureRecognizer 或第三方手势库
如果原生事件无法满足需求，可以考虑使用 GestureRecognizer 或第三方手势库（如 hammer.js）来处理复杂的手势操作。这些库通常提供了更丰富的手势识别功能，并且能够更好地处理手势冲突问题。
2.3 全屏模式下的处理
在全屏模式下，尤其是视频播放插件全屏时，系统可能会接管部分手势事件。你可以尝试以下方法：
- 监听系统全屏事件：在全屏模式下，尝试监听系统的事件，或者在全屏模式下禁用某些手势操作。
- 使用插件的回调：如果使用的是第三方视频播放插件，查看插件是否提供了全屏状态下的回调或事件，以便在全屏模式下处理手势操作。
2.4 检查 nvue 的兼容性
nvue 是 uni-app 的一种原生渲染方式，可能与某些事件或手势操作存在兼容性问题。如果问题依然存在，可以尝试切换到 vue 页面，看看问题是否依然存在。
3. 调试和日志
在调试过程中，建议在 touchstart、touchmove 和 touchend 事件中添加日志，查看事件是否正常触发，以及事件对象中的信息是否符合预期。
handleTouchStart(event) {
console.log('touchstart', event);
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
},
handleTouchMove(event) {
console.log('touchmove', event);
const currentX = event.touches[0].clientX;
const currentY = event.touches[0].clientY;
const deltaX = currentX - this.startX;
const deltaY = currentY - this.startY;
// 处理手势移动逻辑
},
handleTouchEnd(event) {
console.log('touchend', event);
// 处理手势结束逻辑
},