如何仅为React父元素添加事件监听器，避免子元素触发

直接替换事件类型就能解决你的问题：把onMouseOver换成onMouseEnter，onMouseOut换成onMouseLeave。

这两个事件是React专门用来处理元素边界进入/离开的，不会冒泡，也不会因为鼠标在父组件内部的子元素之间移动而触发。只有当鼠标真正从组件外部进入整个父组件区域时，才会触发onMouseEnter；当鼠标完全离开父组件区域时，才会触发onMouseLeave，正好匹配你想要的效果。

修改后的组件代码如下：

function GoodCardMod(props) {

    ...

    const handleMouseEnterGoodCard = (event) => {
        console.log('Enter');
    };
    const handleMouseLeaveGoodCard = (event) => {
        console.log('Leave');
    };


    return (
        <div 
            className='good-card-container component-container'
            onMouseEnter={handleMouseEnterGoodCard}
            onMouseLeave={handleMouseLeaveGoodCard}
        >
            <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>
    );
};

如果因为特殊需求必须使用onMouseOver/onMouseOut，可以在事件处理函数里判断触发事件的目标是否是父组件本身：

const handleMouseOverGoodCard = (event) => {
    // 只有当触发事件的元素是父组件本身时才执行逻辑
    if (event.target === event.currentTarget) {
        console.log('Over');
    }
};
const handleMouseOutGoodCard = (event) => {
    if (event.target === event.currentTarget) {
        console.log('Out');
    }
};

不过这种方法需要注意，如果子元素有嵌套结构，event.target可能是更深层的子元素，不如直接使用onMouseEnter/onMouseLeave可靠。

内容的提问来源于stack exchange，提问作者user22168439