Firefox 中的 Buggy 轮播滚动答案

【问题标题】：Buggy carousel scrolling in FirefoxFirefox 中的 Buggy 轮播滚动
【发布时间】：2020-07-14 03:55:33
【问题描述】：

我正在使用带有链接项目的“react-multi-carousel”。它在 Chrome 和 Opera 中运行良好？在移动设备上。但在 Firefox 中滚动会遇到错误。我猜这是在项目中添加的链接会导致错误，因为纯图像项目轮播在所有浏览器中都可以正常工作。这是我的代码的示例：

const Simple = () => {
  const [isMoving, stopIsMoving] = React.useState(false);
  return (
    <Carousel
      infinite
      ssr
      partialVisibile
      itemClass="image-item"
      responsive={responsive}
      beforeChange={() => stopIsMoving(true)}
      afterChange={() => stopIsMoving(false)}
    >
      {images.slice(0, 5).map(image => {
        return (
          <div isMoving={isMoving}>
            <Link>
              <a
                onClick={e => {
                  if (isMoving) {
                    e.preventDefault();
                  }
                }}
                href="google.com"
              >
                <Image
                  draggable={false}
                  style={{ width: "100%", height: "100%" }}
                  src={image}
                />
              </a>
            </Link>
          </div>
        );
      })}
    </Carousel>
  );
};

代码沙盒是 - https://codesandbox.io/s/react-multi-carousel-playground-7c2kg?file=/components/Simple.js:2109-3012

【问题讨论】：

标签： javascript reactjs scroll carousel preventdefault

【解决方案1】：

通过将以下内容添加到图像卡中解决：

onMouseDown={(event) => {
  if (event.preventDefault) {
    event.preventDefault();
}

【讨论】：