React中带音量滑块的组件实现Draggable的拖拽冲突解决方法

问题本质是事件冒泡：拖动音量滑块时，鼠标按下/触摸开始的事件会向上传递到外层的Draggable组件，触发整个组件的拖拽逻辑。下面是几种实用的解决办法：

方法1：利用Draggable的cancel属性（推荐） #

如果用的是react-draggable库，它自带cancel属性，能指定哪些元素不会触发拖拽。直接给Draggable标签加上这个属性，指向滑块所在的容器即可：

<Draggable cancel=".slider-container">
  {show &&
    <div className="musicContainer">
      {/* 原有组件内容 */}
    </div>
  }
</Draggable>

方法2：在滑块上直接阻止事件冒泡 #

给音量滑块添加onMouseDown和onTouchStart事件，阻止事件向上传递：

<input
  className='volume-range vrange'
  id="musicSlider"
  type="range"
  min={0}
  max={100}
  value={props.volume}
  onInput={(e) => props.handleVolumeChange(e)}
  onMouseDown={(e) => e.stopPropagation()}
  onTouchStart={(e) => e.stopPropagation()}
/>

方法3：给滑块容器添加事件阻止 #

如果想让整个滑块区域（包括音量图标）都不触发组件拖拽，给slider-container加事件处理：

<div 
  className='slider-container'
  onMouseDown={(e) => e.stopPropagation()}
  onTouchStart={(e) => e.stopPropagation()}
>
  <div>
    {/* 音量图标逻辑 */}
  </div>
  <input
    {/* 滑块原有属性 */}
  />
</div>

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