Canvas内span标签的onClick事件无法触发问题排查与解决

核心问题 #

绝对定位的<canvas id="gameFieldDraftPlayersPitch">元素完全覆盖了下方的.playerDraft_ListOfPlayers容器，所有点击事件都被canvas拦截，导致span的onclick无法触发。

原因细节：

• .playerDraft_cListOfPlayers是相对定位容器，作为内部绝对定位元素的参考
• #gameFieldDraftPlayersPitch设置了top:0; right:0; bottom:0; left:0;，同时宽高（1615px×1000px）远大于容器的200px宽度，它会铺满整个容器区域并延伸出去，完全遮盖住下方的span元素。

修复方案 #

方案1：提升span容器的层级（推荐，若需要canvas和span都响应点击）

给.playerDraft_ListOfPlayers添加相对定位和z-index，让它的层级高于canvas：

.playerDraft_cListOfPlayers {
    width: 200px;
    height: 100%;
    position: relative;
}
.playerDraft_ListOfPlayers {
    width: 100%;
    height: 100%;
    position: relative; /* 开启定位，使z-index生效 */
    z-index: 1; /* 层级高于默认的0，覆盖在canvas上方 */
}
.playerDraft_ListOfPlayers span {
    display:inline-block;
}
#gameFieldDraftPlayersPitch {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    height: 1000px;
    width: 1615px;
}

方案2：让点击穿透canvas（若canvas不需要响应点击）

如果canvas仅用于展示图形，不需要处理点击事件，给它添加pointer-events: none，使点击事件直接穿过canvas触发下方元素的事件：

#gameFieldDraftPlayersPitch {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    height: 1000px;
    width: 1615px;
    pointer-events: none; /* 禁止canvas接收点击事件 */
}

方案3：调整canvas的定位范围（若不需要canvas覆盖容器）

修改canvas的定位属性，比如只让它显示在容器外部，或者缩小宽高，避免遮盖span区域：

#gameFieldDraftPlayersPitch {
    position: absolute;
    top: 0;
    left: 200px; /* 从容器右侧开始显示，避开span所在的200px宽度区域 */
    height: 1000px;
    width: 1615px;
}

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