使用 Alpine.js 时,点击模态窗口区域外将 open 设为 false 时的拖拽点击问题修复
这是在 Alpine.js 中使用 @click.outside="open = false" 时修复拖拽问题的方法。 制作模态窗口时,很多示例都会使用 @click.outside。 但这样做会有一个问题:在模态窗口的 input 中拖动时,如果不小心在模态窗口区域外松开鼠标,就会触发 outside 事件,导致模态
GGAMI
这是在 Alpine.js 中使用 @click.outside="open = false" 时修复拖拽问题的方法。
制作模态窗口时,很多示例都会使用 @click.outside。 但这样做会有一个问题:在模态窗口的 input 中拖动时,如果不小心在模态窗口区域外松开鼠标,就会触发 outside 事件,导致模态窗口关闭。
要解决这个问题,需要在模态窗口外部的 div 区域设置事件
@mousedown.self="open = false" 即可。
这样就能设置成:通过拖拽在区域外点击时,模态窗口不会关闭。