Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

问题探讨:除了冒泡,有什么其他解决开启自动进入文本编辑模式后,画布外元素输入事件会被节点拦截的问题 #930

Open
ZhangMingZhao1 opened this issue Oct 10, 2024 · 1 comment

Comments

@ZhangMingZhao1
Copy link

ZhangMingZhao1 commented Oct 10, 2024

由于画布外太多功能性输入框组件,一个一个去阻止冒泡在背景下有其他因素的困难,有没有一个不用一个个改组件的统一外部解决方案。

我看keydown事件是绑在window上的
image
节点聚焦后,点击画布外的很多搜索框编辑框输入都被节点内拦截,期望类似mousedownEventPreventDefault这种传入项,点击画布外区域节点能自动失焦,有什么思路吗?

我尝试了一种方法,把keydown绑在容器元素上,然后customInnerElsAppendTo 传入容器元素,让编辑框浮层也保持在容器元素内,这样容器拦截编辑框的keydown事件,但结果绑定在容器元素上后就不生效了,不知道是什么原因,看编辑框是在容器元素内的,但容器元素却监听不到keydown
image

@wanglin2 wanglin2 reopened this Oct 10, 2024
@ZhangMingZhao1
Copy link
Author

ZhangMingZhao1 commented Oct 10, 2024

目前我还尝试了其他两种方法,其中一个可行,目前效果好像可以:

  1. 可行方法:
    image

全局再给mouseDown注册一个方法,判断事件元素是否来自总容器内,如果来自内部,配合我的这个pr #905 自定义拦截方法:
image
可以保证点击到画布外的组件时(不管做搜索还是输入都需要先鼠标点击),拦截节点的键盘输入事件。

有个注意点是,节点的点击不会触发window上的mousedown,大概率是作者做了阻止默认事件类处理,所以需要再监听NodeActive事件和判断方法相结合。

  1. 第二个尝试方法是想着监听到事件元素来自外部后,直接调用mind的draw_click或者svg_mousedown,模拟触发画布的点击事件,让节点自动失焦:
image image

但结果下来看起来自己手动emit的没并没有用,这块还没时间去细看原因,有知道的可以交流这个问题。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants