博客文章与 Mxmind 思维导图
发布于
# tutorials
- iframe 内嵌 Mxmind1 公开的思维导图（效果如上图）。
pointer-events: none;拦截事件防止误触，比如滑动文章进度，但是又想可以跟 Mxmind 交互，隐藏加了点击事件取消拦截，鼠标离开再加上拦截。- Obsidian 使用 QuickAdd2 创建快捷动作方便快速插入该 iframe。
<div id="mxmind-wrap">
<iframe id="mxmind" src="https://mxmind.com/mindmap/28d648e5-7599-4b6f-b553-1dd388b54b98/preview" width="100%" height="512" frameborder="0" scrolling="no" allowfullscreen="true" style="display: flex; pointer-events: none;">
</iframe>
<script>
console.log('toggle mxmind iframe by click ....');
document.getElementById('mxmind-wrap').addEventListener('click', (e) => document.getElementById('mxmind').style.pointerEvents = 'auto');
document.getElementById('mxmind-wrap').addEventListener('mouseleave', (e) => document.getElementById('mxmind').style.pointerEvents = 'none');
</script>
</div>