解决鼠标移入子元素触发父元素的mouseout事件

方法一、 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】

mouseover 与 mouseenter:

mouseover => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover
事件。

mouseenter => 只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发
mouseenter 事件。

mouseout 与 mouseleave:

mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout
事件。

mouseleave => 只有在鼠标指针从元素内穿出被选元素（到元素外）时，才会触发
mouseleave 事件。

方法二、利用e.stopPropagation()阻止事件进一步传播

e.stopPropagation()会终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

这里要阻止移入子元素触发父元素的mouseout事件，需要在捕获阶段中止冒泡，示例代码如下：

父元素.addEventListener(‘onmouseout’, function(e){

e.stopPropagation();

this.innerHTML = ‘’;

}, true);