由 onMouseOver 触发的 Material-UI 弹出窗口阻止按钮的 onClick 事件

Question

这是 Header.js，其中有按钮<ReactSvg>，<IconButton>当您单击它时，它将使用该switchTheme()功能更改页面主题。当您将鼠标悬停在按钮上时，它还有一个popover声明按钮功能的位置（例如切换主题）。由于某种原因，我将鼠标悬停popover在出现的按钮上，但即使我单击得非常快且有力，也不让我单击该按钮。不知何故，该popover按钮已禁用。呈现按钮的头文件：import React, { useState } from 'react'import ReactSvg from './reactSvg'import { Box, Typography, Link, Container, IconButton } from '@material-ui/core'import PhoneIcon from '@material-ui/icons/Phone'import EmailIcon from '@material-ui/icons/Email'import GitHubIcon from '@material-ui/icons/GitHub'import LinkedInIcon from '@material-ui/icons/LinkedIn'import { useStyles } from '../styles/customStyles'import Image from 'material-ui-image'import PopOver from './PopOver'const styles = {  image: {    maxWidth: 200,    minWidth: 200,  },}export default function Header({ switchTheme }) {  const classes = useStyles()  const [anchorEl, setAnchorEl] = useState(null)  const handleTheme = () => {    switchTheme()  }  const handleHover = (e) => {    setAnchorEl(e.currentTarget)  }  return (    <>      <Box>        <IconButton onClick={() => handleTheme()} onMouseOver={(e) => handleHover(e)}>          <ReactSvg />        </IconButton>        <Typography variant="h3" color="primary">          Staz Christodoulakis        </Typography>        <Typography variant="body1" color="primary">          Software Engineer · Web/App        </Typography>        <hr className="solid" />        <Box          display="flex"          alignItems="center"          justifyContent="center"          className={classes.root}          flexWrap="wrap"        >          <Link color="secondary" variant="body1" href="tel: [phone]">            <Box display="flex">              <PhoneIcon /> 650 409 6202            </Box>          </Link>为什么 onMouseOver 事件会阻塞 onClick 事件？

Answer 1

因此，我通过使用 Material UI 提供的工具提示找到了解决问题的方法。

像这样：

<Tooltip title="Click Me!" placement="right" arrow>

      <IconButton

        onClick={() => handleTheme()}

        // onMouseOver={(e) => handleHover(e)}

      >

        <GetIcon icon={reactLogo} className="reactLogo" />

      </IconButton>

    </Tooltip>

如果有人设法在 Material UI 按钮上使用不同的鼠标事件方法，请在此处发布。谢谢！

Answer 2

你能尝试stopPropagation吗？

  const handleHover = (e) => {

    e.stopPropagation();

    setAnchorEl(e.currentTarget)

  }