除非我一直在寻找错误的内容,否则我似乎无法通过React在网上找到与此问题相同的人?
我有一个具有onClick
事件的按钮(锚标记)。触发onClick
事件后,它将调用loadMore()
函数,该函数进行API调用并更新某些状态。
但是,在移动设备上(而不是台式机上的移动分辨率!),当我单击按钮时,onClick
事件会起作用并返回预期的结果,然而则会应用将鼠标悬停在按钮上状态。对于按钮悬停状态,我应用了背景色
悬停状态将一直保持,直到我单击屏幕上的其他任何位置。因此背景颜色会一直保持不变,直到我单击为止。
现在,这并不是完全理想的。为什么会发生这种情况,我该如何预防呢?
Button
组件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,供您在移动设备上进行测试。
默认情况下,该按钮为橙色,悬停时为灰色。在移动设备上,当您单击...
时会发生这种情况任何帮助将不胜感激!
答案 0 :(得分: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;
}
}