<p dir="auto">Hi, I'm having an issue with <code class="notranslate">onMouseEnter</code> being triggered on children of a component. <em>It only occurs with React 16</em>.</p>
<p dir="auto">I've created a <a href="https://codepen.io/testprofile75/pen/VMXXdb" rel="nofollow">CodePen that shows the issue</a>.</p>
<p dir="auto">Simplified structure is as below:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="           &lt;Card/&gt; :
–––––––––––––––––––––––––––––
|                            |
|          &lt;Cover/&gt;          |
|                            |
------------------------------
|                            |
|    &lt;div class=&quot;text&quot; /&gt;    |
|                            |
–––––––––––––––––––––––––––––"><pre class="notranslate"><code class="notranslate">           &lt;Card/&gt; :
–––––––––––––––––––––––––––––
|                            |
|          &lt;Cover/&gt;          |
|                            |
------------------------------
|                            |
|    &lt;div class="text" /&gt;    |
|                            |
–––––––––––––––––––––––––––––
</code></pre></div>
<p dir="auto"><code class="notranslate">&lt;Card /&gt;</code> is a component that needs to capture <code class="notranslate">onMouseMove</code> events (and trigger a <code class="notranslate">render</code>) and <code class="notranslate">&lt;Cover/&gt;</code> is a simple component that waits for an image (passed as a <code class="notranslate">prop</code>) to be loaded before displaying it (using <code class="notranslate">onload</code> on an <code class="notranslate">Image</code> created in the <code class="notranslate">constructor</code>).</p>
<p dir="auto">If you open the console, you'll see that <code class="notranslate">onMouseEnter</code> is triggered when hovering <code class="notranslate">&lt;Card /&gt;</code> (normal behavior), but also when hovering the <code class="notranslate">.text</code> div (which is not supposed to happen).</p>
<p dir="auto">If you remove the whole <code class="notranslate">onload</code> logic from the <code class="notranslate">&lt;Cover/&gt;</code> element, then <code class="notranslate">onMouseEnter</code> works as intended.</p>
<p dir="auto">It's possible that I'm coding this in a way that isn't appropriate, but it does look like a bug anyway :)</p>
<p dir="auto">版本（versions）：<br>
react@16.0.0<br>
react-dom@16.0.0</p>
<p dir="auto">描述（description）：<br>
给父级别绑定 onMouseEnter 事件。在首次渲染后，鼠标移入新渲染进去的子元素会触发父元素的 onMouseEnter 事件。</p>
<p dir="auto">示例（demo）：</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, {Component} from 'react';

class Demo extends Component {
    constructor(prop) {
        super(prop);
        this.enter = this.enter.bind(this)
        this.state = {
            flag: false
        }
    }
    enter(event) {
        console.log(event.nativeEvent);
        console.log(&quot;enter&quot;)
    }
    click() {
        this.setState({flag:!this.state.flag})
    }
    render() {
        let old = {
            height: &quot;100px&quot;,
            width: &quot;100px&quot;,
            border: &quot;1px solid #6dbbff&quot;
        };
        let aa = {
            height: &quot;100px&quot;,
            width: &quot;100px&quot;,
            border: &quot;1px solid red&quot;
        };
        let content = {
            border: &quot;1px solid black&quot;,
            display: &quot;flex&quot;,
            padding:&quot;10px&quot;
        }
        return(
            &lt;div&gt;
                &lt;div style={content} onMouseEnter={this.enter}&gt;
                    {this.state.a}
                    &lt;div style={old}&gt;old&lt;/div&gt;
                    &lt;div style={aa}&gt;old&lt;/div&gt;
                    {this.state.flag &amp;&amp; &lt;div style={aa}&gt;new&lt;/div&gt;}
                &lt;/div&gt;
                &lt;button onClick={this.click.bind(this)}&gt;点我（click me）&lt;/button&gt;
            &lt;/div&gt;
        )
    }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">Demo</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">prop</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">prop</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">enter</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">enter</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">flag</span>: <span class="pl-c1">false</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
    <span class="pl-en">enter</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">nativeEvent</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"enter"</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
    <span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">flag</span>:<span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">flag</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">let</span> <span class="pl-s1">old</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">height</span>: <span class="pl-s">"100px"</span><span class="pl-kos">,</span>
            <span class="pl-c1">width</span>: <span class="pl-s">"100px"</span><span class="pl-kos">,</span>
            <span class="pl-c1">border</span>: <span class="pl-s">"1px solid #6dbbff"</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>
        <span class="pl-k">let</span> <span class="pl-s1">aa</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">height</span>: <span class="pl-s">"100px"</span><span class="pl-kos">,</span>
            <span class="pl-c1">width</span>: <span class="pl-s">"100px"</span><span class="pl-kos">,</span>
            <span class="pl-c1">border</span>: <span class="pl-s">"1px solid red"</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>
        <span class="pl-k">let</span> <span class="pl-s1">content</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">border</span>: <span class="pl-s">"1px solid black"</span><span class="pl-kos">,</span>
            <span class="pl-c1">display</span>: <span class="pl-s">"flex"</span><span class="pl-kos">,</span>
            <span class="pl-c1">padding</span>:<span class="pl-s">"10px"</span>
        <span class="pl-kos">}</span>
        <span class="pl-k">return</span><span class="pl-kos">(</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">content</span><span class="pl-kos">}</span> <span class="pl-c1">onMouseEnter</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">enter</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                    <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">a</span><span class="pl-kos">}</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">old</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>old<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">aa</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>old<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                    <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">flag</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">aa</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>new<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">click</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>点我（click me）<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>