Angular中视频元素点击事件绑定失效问题求助

问题分析 #

浏览器原生video控件会拦截部分点击事件，直接绑定click或mousedown可能无法覆盖控件区域的点击；另外在Angular中通过addEventListener绑定函数时，若未处理this指向，会导致函数无法正确关联组件实例。

解决方案 #

方案1：父容器事件委托（覆盖全屏点击） #

利用事件冒泡机制，在video的父容器上绑定点击事件，捕获所有点击行为：

<div (click)="doSomething($event)">
  <video
    [src]="url"
    (loadeddata)="onVideoLoaded($event)"
  >
  </video>
</div>

方案2：多事件绑定+修正this指向 #

原生控件对pointerdown事件拦截较少，同时绑定click和pointerdown；使用箭头函数保留组件的this指向：

onVideoLoaded(event) {
  const videoEl = event.target as HTMLVideoElement;
  videoEl.addEventListener('click', (e) => this.doSomething(e));
  videoEl.addEventListener('pointerdown', (e) => this.doSomething(e));
}

doSomething(event){
  console.log('点击触发', event);
}

方案3：禁用原生控件（自定义控件场景） #

若无需浏览器原生控件，添加controls="false"后，video区域的点击事件会正常触发：

<video
  [src]="url"
  (loadeddata)="onVideoLoaded($event)"
  (click)="doSomething($event)"
  controls="false"
>
</video>

关键注意点 #

• 浏览器原生video控件的交互操作（如播放/暂停按钮点击）会阻止事件冒泡，直接绑定在video元素上的click事件无法捕获这类操作，父容器委托或pointerdown监听可解决此问题。
• Angular中通过addEventListener绑定函数时，必须确保this指向组件实例，否则doSomething内的this会指向video元素而非组件。

内容的提问来源于stack exchange，提问作者StaticName