Android端JSColor.hide()功能异常，移动端取色器交互问题

问题背景 #

我在开发涂鸦网站时集成了JSColor取色库，配置了hideOnLeave: true和hideOnPaletteClick: true预设，但移动端存在两个问题：

1. 取色器只能在点击画布并释放后才关闭，无法在点击拖拽时直接进入绘图状态（PC端正常）
2. 尝试通过pointerup事件调用JSColor.hide()关闭取色器后，绘图过程中会莫名改变颜色，仿佛取色器仍处于激活状态

配置代码：

let customColors =  [
    '#2C2B2B', '#FFEE92', '#17C3B2', '#71A5DE', '#C27EC2', '#FE6D73',
];

jscolor.presets.default = {
    palette: customColors,
    hideOnLeave: true,
    hideOnPaletteClick: true,
};

问题分析 #

• JSColor默认的hideOnLeave逻辑主要针对PC端的mouseleave事件，未适配移动端的touchmove事件，导致拖拽时无法触发隐藏
• 手动调用hide()后，JSColor内部的active状态未被正确重置，后续绘图时仍会触发颜色变更逻辑

解决方案 #

方案1：监听touchmove事件，主动隐藏并重置状态 #

通过监听取色器元素的touchmove事件，判断触摸点是否移动到画布区域，主动隐藏取色器并重置JSColor的激活状态：

// 替换为你的取色器触发元素选择器
const colorPickerTrigger = document.querySelector('.jscolor');
// 替换为你的画布元素选择器
const canvas = document.querySelector('#drawing-canvas');

colorPickerTrigger.addEventListener('touchstart', function(e) {
    // 记录初始触摸位置，用于判断是否为拖拽操作
    this.dataset.startX = e.touches[0].clientX;
    this.dataset.startY = e.touches[0].clientY;
});

colorPickerTrigger.addEventListener('touchmove', function(e) {
    const startX = parseInt(this.dataset.startX);
    const startY = parseInt(this.dataset.startY);
    const deltaX = Math.abs(e.touches[0].clientX - startX);
    const deltaY = Math.abs(e.touches[0].clientY - startY);
    
    // 当移动距离超过阈值（判定为拖拽到画布）
    if (deltaX > 10 || deltaY > 10) {
        const canvasRect = canvas.getBoundingClientRect();
        const touchX = e.touches[0].clientX;
        const touchY = e.touches[0].clientY;
        
        // 确认触摸点在画布范围内
        if (touchX >= canvasRect.left && touchX <= canvasRect.right && 
            touchY >= canvasRect.top && touchY <= canvasRect.bottom) {
            
            // 隐藏取色器并重置激活状态
            if (jscolor.active) {
                jscolor.active.hide();
                jscolor.active = null;
            }
            
            // 触发画布的绘图起始逻辑（根据你的代码调整）
            // 例如：startDrawing(touchX - canvasRect.left, touchY - canvasRect.top);
        }
    }
});

方案2：扩展JSColor预设，完善关闭回调 #

修改JSColor预设，添加onClose回调确保内部状态被重置，同时增强移动端事件处理：

jscolor.presets.default = {
    palette: customColors,
    hideOnLeave: true,
    hideOnPaletteClick: true,
    onClose: function() {
        // 关闭时强制重置激活状态
        if (jscolor.active === this) {
            jscolor.active = null;
        }
    },
    // 覆盖默认的touchstart处理，避免阻止画布拖拽
    onTouchStart: function(e) {
        // 保留JSColor的基础逻辑，同时不阻止默认触摸行为
        jscolor.base.onTouchStart.call(this, e);
        e.stopPropagation();
    }
};

关键注意点 #

• 必须确保JSColor的active状态被手动重置，否则后续交互会出现颜色异常
• 移动端触摸事件需要区分点击和拖拽操作，避免误触发取色器隐藏
• 不要在取色器的触摸事件中盲目调用preventDefault()，否则会阻止画布的拖拽绘图逻辑

内容的提问来源于stack exchange，提问作者PPExpress