在 child 元素上触发 onMouseEnter 事件

Question

我正在将 onMouseEnter 事件分配给 parent 元素，但 child 是被此事件触发的事件。当我在控制台上写 e.target 时，它会打印 child。我怎样才能防止这种行为？

我已经尝试了 e.stopPropagation()，并更新了 React。

import React, { Component } from 'react';

export default class Menu extends Component {
    menuElement_Click(e) {
        // trigger change
    }

    menuItem_MouseEnter(e) {
        console.log(e.target);
    }

    render() {
        return (
            <div className='menu-container'>
                <div className='menu-item'>
                    <div className='menu-label' to='/'
                        onClick={this.menuElement_Click.bind(this)}>
                        Home
                    </div>
                </div>
                <div className='menu-item' onMouseEnter={this.menuItem_MouseEnter.bind(this)}>
                    <div className='menu-label'>About</div>
                    <div className='sub-menu'>
                        <div className='sub-menu-item' to='/about#story'
                            onClick={this.menuElement_Click.bind(this)}>
                            Story
                        </div>
                        <div className='sub-menu-item' to='/about#more'
                            onClick={this.menuElement_Click.bind(this)}>
                            More
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

在控制台上打印

<div className='menu-label'>About</div>

但我需要它

<div className='menu-item'>...</div>

Answer 1

使用event.currentTarget（在您的情况下为e.currentTarget）。它始终引用 事件处理程序已附加到的元素 。关于e.target：事件接口的目标属性是对调度事件的对象的引用。

阅读更多关于：event.currentTarget 和 event.target

在 child 元素上触发 onMouseEnter 事件

React onMouseEnter event triggering on child element

reactjs

mouseevent

mouseenter