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

JoestarXu

本帖最后由 Wmh20210707 于 2023-5-11 14:35 编辑

在工作业务中使用了下拉框组件。此组件，在失去焦点时下拉框消失。
但是因为使用了spread，下拉框消失出现问题。
表现为，展开下拉框后，点击页面其他空白区域，下拉框消失正常。
展开下拉框后，鼠标点击spread区域，就无法消失。
我附了demo。仅使用了new Spread（）方法。

已经测试，去监听spread 的容器dom，可以监听到点击，正常冒泡，所以不知应该如何调整此问题了。
麻烦了，期待您的回复。

JoestarXu · JoestarXu

本帖最后由 JoestarXu 于 2023-5-11 15:41 编辑

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

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

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

复制代码

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

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

复制代码

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

JoestarXu · JoestarXu

您好，您提供的这个Demo我在本地install后run serve报错了。

image.png826913146.png

Wmh20210707 · Wmh20210707

JoestarXu 发表于 2023-5-11 11:53
您好，您提供的这个Demo我在本地install后run serve报错了。

我使用的yarn 安装的。您有yarn吗，如果不行，下午我再试一下，重新上传demo

JoestarXu · JoestarXu

我用yarn安装了以后应该执行什么命令才能运行起来？

run serve好像不行。

image.png178917540.png

Wmh20210707 · Wmh20210707

JoestarXu 发表于 2023-5-11 12:20
我用yarn安装了以后应该执行什么命令才能运行起来？

run serve好像不行。

我就是直接 npm run serve 就能跑起来的。我下午看一下，不行重新上传一下

Wmh20210707 · Wmh20210707

JoestarXu 发表于 2023-5-11 11:53
您好，您提供的这个Demo我在本地install后run serve报错了。

您好，是vue的版本问题，我把^去掉了，跟vue-templage-compiler保持一致版本，就ok了。demo重新上传了。麻烦有空给测一下吧。 npm i 和npm run serve 就行

JoestarXu · JoestarXu

本帖最后由 JoestarXu 于 2023-5-11 15:16 编辑

目前有一个比较直接的解决办法，就是为Spread所在的Container添加一个监听，当监听到用户点击了Spread区域，就手动执行代码将下拉框关掉。

Wmh20210707 · Wmh20210707

JoestarXu 发表于 2023-5-11 15:02
目前有一个比较直接的解决办法，就是为Spread所在的Container添加一个**，当监听到用户点击了Spread区域， ...

实际工程里，大几十个页面都有使用了spread，页面如果每个都加一下，代码维护量太大。就想问问，spread为什么会产生这种影响，能不能通过给spread配置什么项来避免这种影响？

JoestarXu · JoestarXu

Wmh20210707 发表于 2023-5-11 15:17
实际工程里，大几十个页面都有使用了spread，页面如果每个都加一下，代码维护量太大。就想问问，spread为 ...

SpreadJS是用canvas实现的，点击canvas不会使外界元素失焦，您在点击Dropdown以后再点击SpreadJS，DropDown检测不到焦点的变化，也因此不会关闭。

		自动登录	找回密码
密码			立即注册

[已处理] 【v9】 spread区域是否影响事件冒泡

最佳答案

11 个回复