如何在不修改标签顺序或z-index的前提下传递事件到canvas下方的input标签？

因为canvas采用绝对定位覆盖在input上方，会默认拦截所有鼠标事件，导致下方的input无法响应交互。以下两种方案可以在不修改标签顺序或z-index的前提下解决问题：

方法一：利用CSS pointer-events 属性 #

给canvas添加pointer-events: none，让它不再拦截鼠标事件，事件会直接穿透到下方的input。如果需要实现白板绘图功能，将绘图事件绑定到canvas的父容器上即可（事件会穿透canvas到达父元素）。

修改后的代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        position: relative;
      }
      canvas {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 0, 0, 0.5);
        pointer-events: none; /* 核心设置 */
      }

      input {
        color: #000;
        border: 1px solid #000;
      }
    </style>
    <script>
      window.onload = function () {
        var canvas = document.getElementById("canvas"),
          context = canvas.getContext("2d"),
          parent = canvas.parentElement,
          MARGIN = 35,
          RADIUS = canvas.width / 2 - MARGIN;

        // 绘制初始圆形
        context.beginPath();
        context.arc(
          canvas.width / 2,
          canvas.height / 2,
          RADIUS,
          0,
          Math.PI * 2,
          true
        );
        context.stroke();

        // 父元素绑定绘图事件（示例：鼠标拖拽绘制）
        let isDrawing = false;
        parent.addEventListener('mousedown', (e) => {
          isDrawing = true;
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          context.beginPath();
          context.moveTo(x, y);
        });

        parent.addEventListener('mousemove', (e) => {
          if (!isDrawing) return;
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          context.lineTo(x, y);
          context.stroke();
        });

        parent.addEventListener('mouseup', () => {
          isDrawing = false;
        });
      };
    </script>
  </head>
  <body>
    <div>
      <input type="text" placeholder="input tag" />
      <canvas id="canvas" width="500" height="500">
        Canvas not supported
      </canvas>
    </div>
  </body>
</html>

方法二：通过事件判断手动触发Input聚焦 #

保留canvas的事件拦截能力，在canvas的事件处理函数中，通过document.elementFromPoint()获取点击位置对应的底层元素。如果检测到是input，就手动触发其聚焦操作，同时跳过绘图逻辑。

修改后的代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        position: relative;
      }
      canvas {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 0, 0, 0.5);
      }

      input {
        color: #000;
        border: 1px solid #000;
      }
    </style>
    <script>
      window.onload = function () {
        var canvas = document.getElementById("canvas"),
          context = canvas.getContext("2d"),
          input = document.querySelector('input'),
          MARGIN = 35,
          RADIUS = canvas.width / 2 - MARGIN;

        // 绘制初始圆形
        context.beginPath();
        context.arc(
          canvas.width / 2,
          canvas.height / 2,
          RADIUS,
          0,
          Math.PI * 2,
          true
        );
        context.stroke();

        // Canvas点击事件处理
        canvas.addEventListener('click', (e) => {
          const targetElement = document.elementFromPoint(e.clientX, e.clientY);
          if (targetElement === input) {
            input.focus();
            return;
          }
          // 点击非input区域时执行绘图逻辑（示例：绘制点）
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          context.beginPath();
          context.arc(x, y, 5, 0, Math.PI * 2);
          context.fill();
        });

        // 鼠标拖拽绘制逻辑
        let isDrawing = false;
        canvas.addEventListener('mousedown', (e) => {
          const targetElement = document.elementFromPoint(e.clientX, e.clientY);
          if (targetElement === input) {
            input.focus();
            return;
          }
          isDrawing = true;
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          context.beginPath();
          context.moveTo(x, y);
        });

        canvas.addEventListener('mousemove', (e) => {
          if (!isDrawing) return;
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          context.lineTo(x, y);
          context.stroke();
        });

        canvas.addEventListener('mouseup', () => {
          isDrawing = false;
        });
      };
    </script>
  </head>
  <body>
    <div>
      <input type="text" placeholder="input tag" />
      <canvas id="canvas" width="500" height="500">
        Canvas not supported
      </canvas>
    </div>
  </body>
</html>

方案选择 #

• 方法一实现简单，适合交互逻辑不复杂的白板场景，无需额外的元素判断。
• 方法二更灵活，canvas可以独立处理自身事件，同时精准控制input的交互触发，适合复杂的白板交互需求。

内容的提问来源于stack exchange，提问作者S.J. Lim