JSColor 默认的 hideOnLeave 和 hideOnPaletteClick 在 Android 移动端无法正确响应拖拽起始（pointerdown），导致调色盘未及时关闭、干扰绘图操作；本文提供经实测有效的绕过方案及完整集成建议。
jscolor 默认的 `hideonleave` 和 `hideonpaletteclick` 在 android 移动端无法正确响应拖拽起始（pointerdown），导致调色盘未及时关闭、干扰绘图操作；本文提供经实测有效的绕过方案及完整集成建议。
在基于 JSColor 构建的移动端涂鸦应用（如 Dewdul Board）中，开发者常遇到一个典型兼容性问题：hideOnLeave: true 仅在手指抬起（pointerup）时触发隐藏，而实际绘图操作始于按下（pointerdown）并立即拖拽——此时调色盘仍处于打开状态，其内部事件监听器会意外劫持初始触摸点，造成“边画边变色”的异常行为。
根本原因在于 JSColor 的移动端事件逻辑存在兼容性缺陷：它依赖 blur 或 mouseleave 等桌面端语义事件，在 Android WebView 或 Chrome for Android 中对 pointerdown 的响应不充分，且未正确识别用户已离开调色盘区域并进入画布的意图。
✅ 推荐解决方案（已在生产环境验证）
在画布的 pointerdown 事件处理器中，添加如下防护性判断：
canvas.addEventListener('pointerdown', function(event) {
// 检查事件是否由 JSColor 内部触发（避免重复隐藏）
if (!event.hasOwnProperty('_data_jscolor')) {
jscolor.hide(); // 立即关闭调色盘
}
// 继续执行您的绘图逻辑（startDrawing, recordPoint 等）
startDrawing(event);
});
该方案利用 JSColor 内部为自有事件自动注入的 _data_jscolor 属性作为“可信来源”标识——仅当事件非 JSColor 自发触发（即用户真正点击画布）时才执行 hide()，从而精准规避误关与竞态问题。
⚠️ 注意事项与最佳实践
- 不要将
jscolor.hide()放在pointerup中：此时绘图早已开始，颜色可能已被错误更新； - 避免全局监听
document.pointerdown：易与 JSColor 自身交互冲突，应限定于画布元素； - 若使用
touchstart作为降级方案，请同步检查event.target.closest('.jscolor')，确保不误触调色盘自身； - 建议保留
hideOnPaletteClick: true，用于点击色板快速选色后自动收起； - 测试务必覆盖 Android Chrome、Samsung Internet 及主流 WebView 容器（如 Capacitor/Cordova）。
? 进阶优化（可选）
为提升用户体验，可在 pointerdown 后添加微延迟隐藏（如 setTimeout(() => jscolor.hide(), 1)），确保 JSColor 有足够时间完成内部状态清理，进一步降低极小概率的残留响应。
综上，此 workaround 并非权宜之计，而是针对当前 JSColor 移动端事件模型局限性的稳健适配策略。它无需修改库源码、不破坏原有配置，且与 presets.default 完全兼容，是目前最简洁可靠的 Android 解决方案。
