在指针向下时检测 div 之外的指针移动事件

detecting pointermove event outside div while pointer is down

前几天我在测试我的技能。最终目标是用 div

替换所有 html 标签

目标: 创建一个类似于 photoshop 中的颜色选择器

要求:只使用H5,JS,CSS(我也用ReactJS搭建结构)

已经达到:

HTML结构:

let padding = props.size * 0.1;
<div className="color-picker">
    <div className='color-picker-container' style={ { width: `${props.size + 2 * padding}px` } } onPointerMove={ onMove } onPointerDown={ onMove }>
        <div className="color-picker-panel" style={ { width: `${props.size}px` } }/>
        <div className="color-picker-indicator" style={ { left: pickerPos.left, top: pickerPos.top, borderColor: `rgb(${getInvertedColorChannel(ColorChannel.R, currentMaxColor)}, ${getInvertedColorChannel(ColorChannel.G, currentMaxColor)}, ${getInvertedColorChannel(ColorChannel.B, currentMaxColor)}` } }/>
    </div>
</div>

结果:

解释:

问题:

欢迎询问更多详情,谢谢!

当您在 div 中获得鼠标按下事件时,将 mouseMove 侦听器附加到 <body> 并从那里跟踪它。鼠标移开时,移除侦听器。