有两种方法可以处理这个问题。

1)检查事件。目标结果在你的回调，看看它是否匹配你的父div

var g_ParentDiv;

function OnMouseOut(event) {
    if (event.target != g_ParentDiv) {
        return;
    }
    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.onmouseout = OnMouseOut;
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

2)或者使用事件捕获和调用事件。回调函数中的stopPropagation

var g_ParentDiv;

function OnMouseOut(event) {

    event.stopPropagation(); // don't let the event recurse into children

    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

有一个简单的方法可以让它起作用。元素和所有子元素都设置了相同的类名，那么:

element.onmouseover = function(event){
 if (event.target.className == "name"){
 /*code*/
 }
}

香草也可以用这种方法

document.querySelector('.product_items') && document.querySelector('.product_items').addEventListener('mouseleave', () => updateCart()) const updateCart = () => { let total = 0; document.querySelectorAll('input') && document.querySelectorAll('input').forEach(item => total += +item.value) document.getElementById('total').innerHTML = total } <div class="product_items"> <div class="product_item"> <div class="product_name"> </div> <div class="multiply__btn"> <button type="button">-</button> <input name="test" type="text"> <button type="button">+</button> </div> </div> <div class="product_item"> <div class="product_name"> </div> <div class="multiply__btn"> <button type="button">-</button> <input name="test" type="text"> <button type="button">+</button> </div> </div> <div class="product_item"> <div class="product_name"> </div> <div class="multiply__btn"> <button type="button">-</button> <input name="test" type="text"> <button type="button">+</button> </div> </div> </div> <div id="total"></div>

我检查原始元素的偏移量以获得元素边界的页面坐标，然后确保只有当鼠标退出超出这些边界时才触发鼠标退出操作。很脏，但很管用。

$(el).live('mouseout', function(event){
    while(checkPosition(this, event)){
        console.log("mouseovering including children")
    }
    console.log("moused out of the whole")
})

var checkPosition = function(el, event){
    var position = $(el).offset()
    var height = $(el).height()
    var width = $(el).width()
    if (event.pageY > position.top 
|| event.pageY < (position.top + height) 
|| event.pageX > position.left 
|| event.pageX < (position.left + width)){
    return true
}
}

对于在大多数情况下都有效的更简单的纯CSS解决方案，可以通过将子指针事件设置为none来删除它们

.parent * {
     pointer-events: none;
}

浏览器支持IE11+

function onMouseOut(event) {
        //this is the original element the event handler was assigned to
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    alert('MouseOut');
    // handle mouse event here!
}



document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

我做了一个快速的JsFiddle演示，所有的CSS和HTML需要，检查它…

编辑固定链接跨浏览器支持http://jsfiddle.net/RH3tA/9/

注意，这只检查直接的父元素，如果父div有嵌套的子元素，那么你必须以某种方式遍历元素的父元素，寻找“原始元素”

编辑嵌套子的示例

编辑修复希望跨浏览器

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
    };
}

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
      var elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    }
    function pushAll(elemArray){
      for(var i=0; i < elemArray.length; i++) {
        q.push(elemArray[i]);
      }
    }
    return children;
}

和一个新的JSFiddle, EDIT更新链接