canvas html5 中的事件模糊

Question

当我在画布上失去焦点时，我正在尝试向画布添加

EventListener

。

我有两块画布：

在第一个画布（左侧）中，我绘制了一个签名，当将焦点更改到右侧画布时，我希望将在第一个画布上绘制的签名保存在服务器中。我知道如何应用逻辑来保存在服务器中，但我无法在画布中调用

blur

事件。

为了尝试这个，我正在做：

var canvas = document.getElementById("pizarra_cliente");
canvas.addEventListener("blur" , function() { 
  console.log("entro");
});

但是，如果我在开发人员工具中放置调试器，我会看到断点没有在

blue

事件内触发。我也尝试过使用

onfocusout

，但遇到了同样的问题。

任何人都可以帮助我在我的画布上创建一个事件（

focusOut

或

blur

）吗？

我使用

blur

，因为我读到这是一个应该在此类用例中使用的事件。

Answer 1

如果不起作用，您可以使用

window.addEventListener('click', e => {})

并检查该元素是否不是画布。您可以使用标志使其仅运行一次，例如：

// Create the flag
let leftCanvasFocused = false

// Place this inside your function that guarantee 
// that the user is interacting with the canvas 
// (probably something related to draw)
leftCanvasFocused = true


window.addEventListener('click', e => {
  if (!leftCanvasFocused || e.target.id !== 'pizarra_cliente') return

  leftCanvasFocused = false

  // Your logic goes here
})