请选择 进入手机版 | 继续访问电脑版
分享
查看: 1048|回复: 0

[分享] 低代码内嵌iframe页面导致的mouseup事件失效问题

[复制链接]

低代码内嵌iframe页面导致的mouseup事件失效问题

发表于 2023-7-5 09:28:55 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon1048 zzr_icon0 查看全部
本帖最后由 何以顾人心 于 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影响.
低代码内嵌iframe页面导致的mouseup事件失效问题
低代码内嵌iframe页面导致的mouseup事件失效问题


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t