本帖最后由 何以顾人心 于 2023-7-5 09:28 编辑
问题描述:低代码中内嵌iframe页面,会出现mouseup事件失效的问题:
- 现象:鼠标在3d场景按下左键不抬起.移动至内嵌的iframe页面后抬起左键.随后将鼠标移动回3D场景,3D场景会跟随鼠标移动但实际鼠标按键并未按下.
- 原因:这种情况的发生是因为鼠标在3D场景下触发了mousedown事件,当鼠标移动至iframe元素上方时,未能触发mouseup事件.mousedown未被注销,鼠标按键未被释放,导致的mouseup事件失效而产生影响.
解决方法:
- 若内嵌iframe无需响应鼠标操作,则可以直接对iframe元素设置pointer-events:none属性.使iframe元素不响应鼠标点击事件.
- 若内嵌iframe需响应鼠标操作(例如内嵌另一个3D场景),可参考以下代码.为外围3D场景app绑定鼠标抬起与按下事件.鼠标按下时控制内嵌iframe的pointer-events属性为none,鼠标抬起时恢复该属性为auto.使得外围3D场景在进行拖拽操作时鼠标操作不受iframe影响.
|
|
|
|
|
|
|
|
|
|
894
0
