当前ios手机在uni-app的nvue页面使用video组件在父元素添加touch的事件会导致video组件本身的控件里面的暂停拖动滚动条不可使用

当前ios手机在uni-app的nvue页面使用video组件在父元素添加touch的事件会导致video组件本身的控件里面的暂停拖动滚动条不可使用

开发环境 版本号 项目创建方式
Mac MacBook Pro HBuilderX
(Retina, 15-inch, Mid 2014)
HBuilderX 4.45
手机系统 手机系统版本号 手机厂商
---------- -------------- --------------
iOS iOS 17 苹果
手机机型 页面类型 vue版本
---------- -------------- --------------
iphone 12 nvue vue3 
### 示例代码：

```html
<template>  
    <view style="width: 750rpx;height: 1400rpx;background: rgba(0,0,0,0.8);"  
          @touchstart="onTouchStart"  
          @touchmove="onTouchMove"  
          @touchend="onTouchEnd"  
    >  
        <swiper :current="current" @change="onChange" style="width: 750rpx;height: 1100rpx;background: #00B18A">  
            <swiper-item>  
                <video  
                    :src="url"  
                    :poster="coverUrl"  
                    :controls="true"  
                    :autoplay="false"  
                    :show-fullscreen-btn="false"  
                    :show-play-btn="true"  
                    :show-center-play-btn="true"  
                    :enable-progress-gesture="false"  
                    :object-fit="'contain'"  
                    :http-cache="true"  
                    :play-strategy="0"  
                    class="preview-video"  
                    style="background: #0a7aff"  
                />  
            </swiper-item>  
            <swiper-item>  
                <video  
                    :src="url2"  
                    :poster="coverUrl2"  
                    :controls="true"  
                    :autoplay="false"  
                    :show-fullscreen-btn="false"  
                    :show-play-btn="true"  
                    :show-center-play-btn="true"  
                    :enable-progress-gesture="false"  
                    :object-fit="'contain'"  
                    :http-cache="true"  
                    :play-strategy="0"  
                    class="preview-video"  
                    style="background: #ff0afb;margin-top: 200rpx"  

                />  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    export default {  
        data(){  
            return{  
                url:'',  
                coverUrl:'',  
                url2:'',  
                coverUrl2:'',  
                current:0,  
            }  
        },  
        methods:{  
            onTouchStart(e){  
                console.log('《Debug》----> onTouchStart 111 = ', e);  
            },  
            onTouchMove(){  
                console.log('《Debug》----> onTouchMove 2222 = ', 2222);  
            },  
            onTouchEnd(){  
                console.log('《Debug》----> onTouchEnd 32323 = ', 32323);  
            },  
            onChange(e){  
                this.current = e.detail.current;  
            },  
        }  
    }  

</script>  

<style>  

    .preview-video{  
        width: 600rpx;  
        height: 600rpx;  
    }  

</style>

更多关于当前ios手机在uni-app的nvue页面使用video组件在父元素添加touch的事件会导致video组件本身的控件里面的暂停拖动滚动条不可使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于当前ios手机在uni-app的nvue页面使用video组件在父元素添加touch的事件会导致video组件本身的控件里面的暂停拖动滚动条不可使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS上常见的事件冒泡问题。当父元素设置了touch事件监听后，会干扰video组件内部控件的事件响应。

建议的解决方案：

  1. 使用事件修饰符（推荐） 在父元素的touch事件上添加.stop修饰符阻止事件冒泡：
<view 
  @touchstart.stop="onTouchStart"
  @touchmove.stop="onTouchMove" 
  @touchend.stop="onTouchEnd"
>
  1. 条件性阻止默认行为 在touch事件处理函数中判断事件源，如果是video区域则不处理：
onTouchStart(e) {
  if (e.target.className.includes('preview-video')) return
  console.log('《Debug》----> onTouchStart 111 = ', e)
}

  1. 调整事件绑定层级 将touch事件绑定到swiper而不是最外层view，减少事件影响范围。

  2. 使用pointer-events控制 在特定情况下可以通过CSS控制子元素的事件响应：

.preview-video {
  pointer-events: auto;
}
回到顶部