6***@qq.com

发布：2020-06-05 11:44
更新：2023-08-15 09:58
阅读：2653

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

分类：uni-app

bug反馈

产品分类： 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 分享

4 个回复

CLP

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

一顾倾人诚

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

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 - 80后阳光，正气男孩

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

要回复问题请先登录或注册

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

代码片段

操作步骤：

触发 cover-view 中的 showRightQualityFn 方法

预期结果：

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

实际结果：

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

bug描述：

4 个回复

公告

相关问题

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

代码片段

操作步骤： 触发 cover-view 中的 showRightQualityFn 方法

预期结果： 只触发一次 video上的click事件，并且可以 通过 click.stop 或者 e.stopPropagation(); 阻止事件冒泡；

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

bug描述：

与内容相关的链接

4 个回复

公告

相关问题

操作步骤：

触发 cover-view 中的 showRightQualityFn 方法

预期结果：

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

实际结果：

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