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

Question

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

替换所有 html 标签

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

要求：只使用H5，JS，CSS（我也用ReactJS搭建结构）

已经达到：

使用 onPointerMove 和 onPointerDown 检测视口中的指针位置
计算指针位置（左/上）并将指示器定位在我的指针所在的位置
获取RGB中选择的颜色

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>

结果：

解释：

背景颜色根据所选颜色变化
白色部分是容器的padding
用于“添加填充”解决方法（在“问题”中说明）的容器中的指针事件
指示器只能在白色区域内拖动时移动（包括颜色选择器面板）

问题：

指针事件仅在直接与 div 交互时触发，因此当指针向下并超出 div（白色区域）
当前的解决方法是向颜色选择器添加一个填充，但这种方法在交互的位置上仍然有一个边界。目标是能够在 div 中的 pointerdown 之后移动指标，即使指针从 div 内部移动到 div.

欢迎询问更多详情，谢谢！

Answer 1

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

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

detecting pointermove event outside div while pointer is down

javascript

html

css

pointer-events