Canvas上层Banner Ads交互冲突：点击问题解决方案咨询

核心原则 #

别用JS模拟广告点击——绝大多数广告平台（如AdMob、Unity Ads）都明确禁止这种操作，会导致广告结算失效甚至账号封禁。正确思路是让广告区域仅响应自身点击，其余区域完全交给Canvas交互。

方案1：固定广告布局（推荐） #

直接给广告元素设置精准的定位和尺寸，只占据自身所需区域，不遮挡全屏Canvas的大部分交互空间：

/* 广告容器样式 */
.banner-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; /* 自适应屏幕宽度 */
  height: 50px; /* 对应Banner广告标准高度 */
  z-index: 10;
  /* 不设置pointer-events:none，保持广告自身的点击交互 */
}

/* Canvas样式 */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  /* 无需特殊处理，非广告区域自动响应Canvas交互 */
}

这种方式最简单，广告只在底部/顶部固定区域生效，游戏Canvas的其他区域完全正常接收点击、鼠标移动等事件。

方案2：事件委托精准分发（适配特殊场景） #

如果游戏必须让Canvas全屏交互，但广告又需要悬浮在任意位置，可通过事件委托判断点击位置，手动分发事件：

1. 先给Canvas设置pointer-events: none，让它不直接接收事件
2. 在全局容器上绑定事件，判断点击坐标是否落在广告区域内，再决定事件派发给谁

代码实现

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none; /* 禁止Canvas直接接收事件 */
}

.banner-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 10;
}

const bannerAd = document.querySelector('.banner-ad');
const gameCanvas = document.querySelector('canvas');

// 处理点击事件
document.addEventListener('click', (e) => {
  const adRect = bannerAd.getBoundingClientRect();
  // 判断点击坐标是否在广告范围内
  const hitAd = e.clientX >= adRect.left && e.clientX <= adRect.right &&
                e.clientY >= adRect.top && e.clientY <= adRect.bottom;

  if (!hitAd) {
    // 点击不在广告上，手动给Canvas派发点击事件
    const canvasClick = new MouseEvent('click', {
      clientX: e.clientX,
      clientY: e.clientY,
      bubbles: true
    });
    gameCanvas.dispatchEvent(canvasClick);
  }
  // 点击在广告上时，广告自身会处理，无需额外操作
});

// 如需处理鼠标移动事件，逻辑同理
document.addEventListener('mousemove', (e) => {
  const adRect = bannerAd.getBoundingClientRect();
  const overAd = e.clientX >= adRect.left && e.clientX <= adRect.right &&
                 e.clientY >= adRect.top && e.clientY <= adRect.bottom;

  if (!overAd) {
    const canvasMove = new MouseEvent('mousemove', {
      clientX: e.clientX,
      clientY: e.clientY,
      bubbles: true
    });
    gameCanvas.dispatchEvent(canvasMove);
  }
});

关键注意事项 #

• 绝对不要模拟广告点击：广告平台的反作弊机制会识别这类行为，直接影响广告收益甚至账号安全。
• 适配多设备：不同移动端/桌面端的坐标计算可能存在差异，需测试多种屏幕尺寸。
• 优先用方案1：布局固定的广告对游戏体验影响最小，实现成本也最低。

内容的提问来源于stack exchange，提问作者Coder Gautam YT