uni-app cover-view组件覆盖video组件时点击传透无法阻止冒泡事件

uni-app cover-view组件覆盖video组件时点击传透无法阻止冒泡事件

14 回复

没人关注？

更多关于uni-app cover-view组件覆盖video组件时点击传透无法阻止冒泡事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


改用NVUE 用view遮挡video

你确定可以？我记得好像，video全屏下，没办法用position 来定位遮住啊

NVUE全屏也可以啊

多谢，我一会测试下

你自己测试过吗？我怎么试了不行啊，，， <view> <view class='position-fixed' style='top:44px;left:0;height:110rpx;width:100px'> <view class=‘w-100 bg-danger’ @click=‘handleClick’ style=‘height:100rpx;’></view> </view> </view>

<template> <view> <view class='position-fixed' style='top:44px;left:0;height:110rpx;width:100px'> <view class='w-100 bg-danger' @click='handleClick' style='height:100rpx;'></view> </view> 
</view>
</template> <script> export default { onLoad(option) { this.videoSrc = option.url }, onReady() { this.videoContext = uni.createVideoContext('myVideo') this.videoContext.requestFullScreen({ direction: 0 }) }, data() { return { videoContext: null, videoSrc: '' } }, methods: { handleClick(e) { e.stopPropagation() this.goBack() console.log('dianji') }, goBack(){ uni.navigateBack({ delta: 1 }) }, } } </script> <style scoped> </style>

cover-view

那就又回到了 我提的BUG了啊，唉

试试以下代码 <template>
<view>

    <video id="myVideo" :src="videoSrc" :autoplay='true' :loop='true' :direction='0'    
     v-if='videoSrc' :show-fullscreen-btn='false' class='position-relative'>    
          <view class='position-fixed' style='top:44px;left:0;height:110rpx;width:100px'>    
             <view class='w-100 bg-danger' @click='handleClick' style='height:100rpx;'></view>    
          </view>    
    </video>    

</view>
</template> <script> export default { onLoad(option) { this.videoSrc = option.url }, onReady() { this.videoContext = uni.createVideoContext('myVideo') this.videoContext.requestFullScreen({ direction: 0 }) }, data() { return { videoContext: null, videoSrc: '' } }, methods: { handleClick(e) { e.stopPropagation() this.goBack() console.log('dianji') }, goBack(){ uni.navigateBack({ delta: 1 }) }, } } </script> <style scoped> </style>

不行，

请问解决了么

解决了么

在uni-app中，当cover-view覆盖在video组件上时，确实会出现点击事件穿透的问题。这是因为cover-view虽然可以覆盖在原生组件上，但默认情况下无法完全阻止事件冒泡。

解决方案：

  1. 使用@click.stop修饰符阻止事件冒泡：
<cover-view @click.stop="handleClick"></cover-view>
  1. 对于需要完全阻止穿透的情况，可以结合使用pointer-events样式：
cover-view {
  pointer-events: auto;
}
  1. 如果仍然有问题，可以在cover-view外层再包裹一个view，并设置其样式为：
.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
}
回到顶部