1216 今日总结
今日工作
问题
- 问题1：iframe click 事件无效#TODO
原因
- 问题1：iframe 不支持指针事件；
- 其次：iframe 加载的是跨域资源，无法操作跨域资源；
解决方式
- 问题1：iframe click 事件无效，暂时无法解决，先挂着后续再看#TODO；
- 解决方式考虑换掉 iframe 作为 pdf 的 viewer 的方式，考虑使用
- 相关的使用方式可以参考博客
参考资料：
- HTMLIFrameElement/MDN
- 从对象到iframe - 其他嵌入技术/MDN
- iframe focus/focusin/blur/focusout 事件
- iframe click 事件无效
- Adding click event handler to iframe
- 如何解决 iframe 无法触发 clickOutside
- Apply onClick to Iframe
iframe的坑-合集：
google 搜索关键字 iframe 坑
优化
- 实现对 多图模式预览列表优化
- 图片容器长度小于 modal 时，不出现左右切换，图片仅仅居中展示；
- 图片容器长度大于 modal 时，出现左右切换；
- 目的：
- 避免在不需要切换图片列表的时候，出现了切换按钮误导用户；
- 提升用户体验；
巧妙实现
- clickAway 实现：
- 原方案：参考 useClickAway/ahooks.js
- 无法实现原因：要求不能使用蒙层，点击弹框以外的元素关闭弹框；因为弹框放到了 body 下，鼠标点中的其他区域无法操作
clickedElement.contains(modalElement)； - 新方案：react v.17.x 事件系统挂在 container 上，modal 点击蒙层关闭的问题就很好解决了
新方案：
- modal 挂载的时候注入 全局的 document.click 事件，触发操作是关闭弹框；
- modal 顶层元素监听 onclick 事件，e.stopPropagation();阻止冒泡；
- 外部 DOM 操作若想要点击但是不想蒙层关闭，直接使用 e.stopPropagation() 即可;
TODOS
短期内要做的事情
- 阅读 ahooks 源码 深入 react-hook