javascript - 移动设备悬停状态下元素的 onClick 事件仍然适用

Question

除非我一直在寻找错误的东西，否则我似乎无法在网上找到与 React 有同样问题的人？

我有一个带有 onClick 事件的按钮( anchor 标记)。当触发 onClick 事件时，它会调用 loadMore() 函数，该函数会调用 API 并更新一些状态。

但是在移动设备上(不是桌面上的移动分辨率!)当我单击按钮时，onClick 事件起作用并返回预期的内容，但是它应用了按钮上的悬停 状态。对于按钮悬停状态，我应用了背景色

悬停状态会一直保持，直到我点击屏幕上的其他任何地方。所以背景颜色会一直保留，直到我点击离开。

现在，这并不是我们想要的。为什么会发生这种情况，我是如何预防的？

这是我的按钮组件

const Button = props => {
  const buttonDisabledClass = props.disabled ? "Button--disabled " : "";
  const hiddenClass = props.hidden ? "Button--hidden " : "";
  const modifierClass = props.modifier ? props.modifier : "";

  return (
    <>
      <a
        onClick={!props.disabled ? props.onClick : undefined}
        className={
          "Button " + buttonDisabledClass + hiddenClass + modifierClass
        }
      >
        {props.children}
        {props.buttonText ? (
          <span
            className={`Button-text ${
              props.buttonMobileText ? "Button-desktopText" : ""
            }`}
          >
            {props.buttonText}
          </span>
        ) : null}
        {props.buttonMobileText ? (
          <span className="Button-mobileText">{props.buttonMobileText}</span>
        ) : null}
      </a>
    </>
  );
};

这里是父组件

父组件引入了Button组件，并具有发起API请求的功能(这里只模拟一个)

function App() {
  const [number, setNumber] = useState(0);

  /*simulate http request*/
  const ttl = 500;
  const loadMore = () => {
    const timeout = setTimeout(() => {
      setNumber(number + 1);
    }, ttl);
    return () => {
      clearTimeout(timeout);
    };
  };

  return (
    <div className="App">
      {number}
      <Button
        key={"loadMoreBtn"}
        modifier="Button--loadMore Button--Inline"
        onClick={() => loadMore()}
      >
        Load More
      </Button>
    </div>
  );
}

那么，我怎样才能让在移动设备上的点击不注册悬停，但仍然像目前一样在桌面设备上使用悬停？

我有一个 CODESANDBOX如果你想自己测试一下

这是一个link供您在移动设备上进行测试。

该按钮默认为橙色，悬停时为灰色。在移动设备上，当您单击...时会发生这种情况...

如有任何帮助，我们将不胜感激!

Answer 1

您可以使用 CSS 中的媒体查询覆盖移动设备上的悬停效果:

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  .Button:hover {
    background-color: #ee4900 !important;
  }
}

或者

@media (hover: none) {
  .Button:hover {
    background-color: #ee4900 !important;
  }
}