如何将playButtonContainer置入现有代码并修复按钮点击无响应问题

问题根因 #

按钮点击无响应是CSS配置错误导致：你给.thePlay类按钮设置了pointer-events: none属性，该属性会完全禁用元素的所有鼠标交互事件，所以点击按钮没有任何反馈。

修复方案 #

1. 首先删除CSS中如下错误规则：

button.thePlay {
  pointer-events: none;
}

2. 按照要求的结构摆放容器即可，完整HTML结构参考：

<div class="outer">
  <!-- 原有移除播放按钮后的所有业务代码放在此处 -->
</div>

<div class="playButtonContainer">
  <!-- 所有播放按钮代码放在此处 -->
</div>

3. 若出现按钮被其他元素遮挡无法点击的情况，可给.playButtonContainer新增z-index: 999样式，保证按钮层级在最上层。
4. 确认原有JS代码中绑定的按钮类名（playa/playb等）没有修改，原有事件绑定逻辑会自动生效。

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