如何阻止拖拽Mantine Slider时带动整个Carousel滑动？

方案一：在Slider上直接阻止事件传递与默认行为 #

在Slider组件绑定onPointerDown事件，同时调用stopPropagation()和preventDefault()，彻底切断事件向Carousel拖拽逻辑的传递：

import { Carousel } from "@mantine/carousel";
import { Slider, Text } from "@mantine/core";

export default function TestPage() {
  const handleSliderPointerDown = (event: React.PointerEvent) => {
    event.stopPropagation();
    event.preventDefault();
  };

  return (
    <Carousel
      withIndicators
      slideGap="xl"
      align="center"
      dragFree
      slidesToScroll={1}
      slideSize="50%"
      p={100}
    >
      <Carousel.Slide p="xl">
        <Text>Slider 1</Text>
        <Slider onPointerDown={handleSliderPointerDown} />
      </Carousel.Slide>
    </Carousel>
  );
}

方案二：通过Carousel的dragProps过滤拖拽触发元素 #

利用Carousel提供的dragProps配置，通过filter函数判断触发拖拽的目标元素，若为Slider的滑块组件则跳过Carousel的拖拽逻辑：

import { Carousel } from "@mantine/carousel";
import { Slider, Text } from "@mantine/core";

export default function TestPage() {
  return (
    <Carousel
      withIndicators
      slideGap="xl"
      align="center"
      dragFree
      slidesToScroll={1}
      slideSize="50%"
      p={100}
      dragProps={{
        filter: (event) => {
          // 匹配Mantine Slider滑块的类名，排除该元素触发的拖拽
          return !event.target?.closest(".mantine-Slider-thumb");
        },
      }}
    >
      <Carousel.Slide p="xl">
        <Text>Slider 1</Text>
        <Slider />
      </Carousel.Slide>
    </Carousel>
  );
}

方案三：用容器包裹Slider并阻止事件冒泡 #

给Slider套一层容器，在容器上绑定onPointerDown事件阻止事件传递，确保Slider的所有交互都不会触发Carousel的拖拽：

import { Carousel } from "@mantine/carousel";
import { Slider, Text, Box } from "@mantine/core";

export default function TestPage() {
  const blockCarouselDrag = (event: React.PointerEvent) => {
    event.stopPropagation();
  };

  return (
    <Carousel
      withIndicators
      slideGap="xl"
      align="center"
      dragFree
      slidesToScroll={1}
      slideSize="50%"
      p={100}
    >
      <Carousel.Slide p="xl">
        <Text>Slider 1</Text>
        <Box onPointerDown={blockCarouselDrag}>
          <Slider />
        </Box>
      </Carousel.Slide>
    </Carousel>
  );
}

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