6***@qq.com
6***@qq.com
  • 发布:2020-06-05 11:44
  • 更新:2023-08-15 09:58
  • 阅读:2728

【报Bug】video 上监听点击事件click ,在cover-view上点击会触发2次video的click

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: 6s

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

代码片段

      class="cus-video"  
      id="myVideo"  
      ref="myVideo"  
      :src="src"  
      @error="videoErrorCallback"  
      :enable-progress-gesture="false"  
      :show-mute-btn="true"  
      :vslide-gesture-in-fullscreen="false"  
      :controls="controls"  
      @fullscreenchange="fullscreenchange"  
      @fullscreenclick="fullscreenclick"  
      @controlstoggle="controlstoggle"  
      :enable-danmu="true"  
      title="titletitle"  
      direction="90"  
      @timeupdate="timeupdate"  
      @play="playCbFn"  
      @pause="pauseCbFn"  
      @click="click"  
    >  
      <cover-view class="controls-playbackrate" v-if="!fullScreen" @click="playbackrateFn">  
        <text class="controls-playbackrate-btn">X{{ playbackrate }}</text>  
      </cover-view>  
      <cover-view class="controls-topbar" v-if="showtopbar">  
        <text class="video-topbar-bkbtn video-player-icon" @click.stop="exitFullScreenFn">&#xe604;</text>  
        <text class="video-topbar-title">视频标题视频标题视频标题</text>  
        <view class="video-topbar-controls">  
          <!-- 右上角按钮面板 -->  
          <text class="video-topbar-controls-btns controls-btns-playbackrate" @click.stop="showRightRateFn">{{ playbackrateStr }}</text>  
          <text class="video-topbar-controls-btns controls-btns-quality" @click.stop="showRightQualityFn">{{ curQualityStr }}</text>  
        </view>  
      </cover-view>  
</video>  

showRightQualityFn(e) {  
      // #ifdef APP-NVUE  
      e.stopPropagation();  
      // #endif  
      console.log('showRightQualityFn');  
      this.showRightQuality = true;  
    }

操作步骤:

触发 cover-view 中的 showRightQualityFn 方法

预期结果:

只触发一次 video上的click事件,并且可以 通过 click.stop 或者 e.stopPropagation(); 阻止事件冒泡;

实际结果:

触发2次video上的click事件,并且不能阻止事件冒泡,,e.stopPropagation(); 可以阻止其中一个事件

bug描述:

APP端 .nvue页面中 video 上监听点击事件click ,在cover-view上点击会触发2次video的click;使用@click.stop= 不能阻止事件冒泡;

cover-view的子元素上的点击事件使用。。如下代码可以阻止其中一个点击事件冒泡到video 上

// #ifdef APP-NVUE  
      e.stopPropagation();  
      // #endif

以上代码可阻止的事件详情:

{  
  "type": "click",  
  "timeStamp": 1591327061974,  
  "target": {  
    "id": "",  
    "dataset": {},  
    "offsetLeft": 0,  
    "offsetTop": 0  
  },  
  "currentTarget": {  
    "ref": "646",  
    "type": "u-video",  
    "attr": {  
      "id": "myVideo",  
      "src": "https://xxxxx/tmp_file/test001.mp4",  
      "enableProgressGesture": false,  
      "showMuteBtn": true,  
      "vslideGestureInFullscreen": false,  
      "controls": true,  
      "enableDanmu": true,  
      "title": "titletitle",  
      "direction": "90"  
    },  
    "style": {  
      "width": "375",  
      "height": "211"  
    },  
    "event": ["error", "fullscreenchange", "fullscreenclick", "controlstoggle", "timeupdate", "play", "pause", "click"]  
  },  
  "detail": {}  
}  

不可阻止的事件详情:

{  
  "type": "click",  
  "timeStamp": 1591327061979,  
  "target": {  
    "id": "myVideo",  
    "dataset": {},  
    "offsetLeft": 0,  
    "offsetTop": 0  
  },  
  "currentTarget": {  
    "id": "myVideo",  
    "dataset": {},  
    "offsetLeft": 0,  
    "offsetTop": 0  
  },  
  "detail": {}  
}  
2020-06-05 11:44 负责人:CLP 分享
已邀请:
CLP

CLP

提供一个能复现问题的demo来

一顾倾人诚

一顾倾人诚

遇到了同样的问题 在视频组件中 使用cover-view 无法用.stop 阻止冒泡

1***@qq.com

1***@qq.com - 80后阳光,正气男孩

有点奇怪,在安卓端,我用的是subNvue,给video绑定click事件,tap事件都不触发,只有按下屏幕,本身就是想做一个剧集,上下滑动切换视频,底部有一个浮动菜单,想点击显示和隐藏,结果不触发 <video id="myVideo" :paused="isPaused" v-if="videoList.length > 0" :src="videoList[currentVideoIndex].src" autoplay="true" @pause="pauseHander" :controls="isShowControls" @play="playHander" @controlstoggle="clctogg" @ended="endPlay" :show-play-btn="false" :show-fullscreen-btn="false" object-fit="fill" @fullscreenchange="fullscreenchangeHander" :initial-time="movie.startTime" title="'第'+(currentNumber+1)+'集'" @tap="tapHandlder" @click="clickHandler">
1***@qq.com

1***@qq.com - 80后阳光,正气男孩

我在onload中,调用了uni.getSubNVueById('tabnav').show('none',0);,但是进入之后闪一下就消失了,滑动切换到第二个视频就又显示了,这是怎么回事啊,还有就是监听不到click事件,想根据click显示和隐藏菜单

要回复问题请先登录注册