求助：HTML5 Canvas无法触发blur/focusOut事件的解决方案

Canvas元素默认不属于可聚焦元素，直接绑定blur或focusout事件不会触发。要实现你需要的切换Canvas时保存签名的逻辑，得先让Canvas具备聚焦能力，再绑定事件，具体步骤如下：

1. 让Canvas可聚焦 #

给目标Canvas添加tabindex属性（值设为0或正整数可让它被Tab键选中；设为-1则仅能通过JS手动聚焦）：

• 直接在HTML中设置：

<canvas id="pizarra_cliente" tabindex="0"></canvas>

• 或通过JS动态设置：

var canvas = document.getElementById("pizarra_cliente");
canvas.setAttribute('tabindex', '0');

2. 绑定blur事件 #

现在Canvas可以接收焦点，绑定blur事件就能正常触发了：

var canvas = document.getElementById("pizarra_cliente");
canvas.setAttribute('tabindex', '0');

canvas.addEventListener("blur", function() {
  console.log("左侧Canvas失去焦点，开始保存签名");
  // 这里调用你的服务器保存逻辑
});

3. 优化体验（可选） #

• 点击Canvas时自动聚焦：如果希望用户点击Canvas绘制时自动获得焦点，可额外绑定click事件：

canvas.addEventListener('click', function() {
  this.focus();
});

• 移除默认聚焦样式：浏览器会给聚焦的Canvas添加默认外边框，可通过CSS去掉：

#pizarra_cliente:focus {
  outline: none;
}

原理说明 #

只有具备tabindex属性的元素（或原生可聚焦元素，如输入框、按钮）才能接收焦点相关事件。给Canvas添加tabindex后，它会被浏览器视为可聚焦元素，blur事件会在元素失去焦点时（比如点击右侧Canvas、页面其他区域）触发。

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