【前端】解决：点击一个button，发现不触发点击事件

文章目录

• • 场景
  • 解决

场景

写一个活动页，嵌入了一个视频，要求点击视频可以执行某点击事件。

技术栈：svelte。所以在点击的容器上，标签是button。

 <button
     class="reset-btn video-container"
     on:click={() => {
         handleClick();
     }}
 >
     <video
         bind:this={videoRef}
         controls={false}
         autoplay
         muted
         loop={false}
         src="xxx"
         poster="xxx"
         webkit-playsinline={true}
         playsinline={true}
     ></video>
 </button>

发现点击不会触发事件。

解决

css添加样式如下：

z-index: 0;
position: relative;

就可以点击。

怀疑是视频内部的元素覆盖了可点击的区域。因此通过定位 position: relative; 的方式把它的优先级抬上来。