如何仅向父元素添加事件侦听器

How to add an event listener only to a parent element

提问人： 提问时间：7/14/2023 最后编辑：Suryasish Paul 更新时间：7/17/2023 访问量：39

问：

我正在用 React 开发一个电子商店卡。我在父 div 中添加了 onMouseOver 和 onMouseOut 事件侦听器。React 将这些事件侦听器传播到它的所有子元素，因此每次光标进入或离开子元素时都会触发一个事件。我想要一个不同的行为 - 只有当光标进入或离开父组件而不是其子组件时，才会触发该事件。

我试图在互联网上找到解决方案，但令人惊讶的是，只假设了 stopPropagation 方法。

React 大师，请提供解决方案。

这是我的组件：

function GoodCardMod(props) {

    ...

    const handleMouseOverGoodCard = (event) => {
        console.log('Over');
    };
    const handleMouseOutGoodCard = (event) => {
        console.log('Out');
    };


    return (
        <div 
            className='good-card-container component-container'
            onMouseOver={handleMouseOverGoodCard}
            onMouseOut={handleMouseOutGoodCard}
        >
            <img 
                src={good.good_image} 
                alt={good.name} 
                className='good-card-image'>
            </img>
            <span className='good-card-title'>
                {good.name}
            </span>
            <span className='good-card-price'>
                {good.current_price} грн
            </span>
            <Button 
                size='small' 
                onClick={isInCart[0] ? ()=> {} : () => cartDispatcher(addToCartAction(cartGood))}
                variant="contained"
                className='good-card-button'
                color={isInCart[0] ? 'success' : 'primary'}
            >
                {isInCart[0] ? 'Вже у кошику' : 'У кошик'}
            </Button>
            <CharachteristicsList characteristics={good.good_characteristics} />
        </div>
    );
};
HTML ReactJS 事件

评论

0赞 Konrad 7/14/2023
有用吗？event.stopPropagation()
0赞 7/14/2023
是的，确实如此，但根本不会触发父事件。换句话说，进入/离开卡时不会发生任何事情。

答：

1赞 SidMcHeath 7/14/2023 #1

尝试签入父组件的。这将替换您当前的代码。event.currentTarget === event.targetonMouseEnteronMouseOver

    const mouseIn = (event) => {
        if (event.currentTarget === event.target) {
          console.log('In');
       }
    };
    const mouseOut = (event) => {
        if (event.currentTarget === event.target) {
          console.log('Out');
       }
    };

评论

1赞 7/14/2023
谢谢希德，我刚刚尝试了你的建议。它也没有以所需的方式工作。几个小时以来，我一直在互联网上寻找解决方案，得出的结论是我想要的行为是无法实现的。但是您的代码 （event.currentTarget === event.target） 会更好地工作，然后挖掘另一个任务:)

上一个：名称：typescript 事件处理程序的类型？

下一个：将自定义组件附加到已存在的 div