【v9】 spread区域是否影响事件冒泡

或者您可以试试下述方法：

1. 为 canvas 元素添加 click 事件**。

1. const canvas = document.querySelector('canvas');
   
2. canvas.addEventListener('click', handleClick);

复制代码

2. 在事件处理程序 handleClick 中，将页面中的其他元素聚焦到一个无法获取焦点的元素上。你可以创建一个隐藏的 input 元素，并将其聚焦，这样其他元素就会失去焦点。

1. function handleClick(event) {
   
2.     // 创建一个隐藏的input元素
   
3.     const focusDummy = document.createElement('input');
   
4.     focusDummy.type = 'text';
   
5.     focusDummy.style.opacity = 0;
   
6.     // 添加到body或其他父元素中
   
7.     document.body.appendChild(focusDummy);
   
8.     // 聚焦到该元素上
   
9.     focusDummy.focus();
   
10.     // 然后再将其从 DOM 树中移除掉
    
11.     document.body.removeChild(focusDummy);
    
12. 
    
13.     // 此处可以执行其他操作，比如绘制图形等
    
14. }

复制代码

这样，在点击 Canvas 元素时，其他元素就会失去焦点了。