[JavaScript知识库]html触碰子级时父级移入事件失效，js父级移入事件触碰到子级时失效，jQuery父级移入事件触碰子级失效等问题解决

前言

父级使用“鼠标移入事件”时，触碰到子级就会失效
如图，蓝色为父级，红色为子级，鼠标移动到红色块后，蓝色父级的移入事件就会失效

问题处理

关键JS代码

/**
 * --------------------------------------------------------------------------------------
 * 父级移入移出事件阻止子级元素遮挡后失效
 * @param {Object} obj1
 * @param {Object} ev
 * @param {Object} event
 */
function toAffect(obj1, ev, event){
    var obj2 = null;
    if(ev.relatedTarget){
        obj2 = ev.relatedTarget;
    }else{
        if(event == 'mouseover'){
            obj2 = ev.fromElement;
        } else if(event == 'mouseout'){
            obj2 = ev.toElement;
        }
    }
    if(obj1.contains){
        return !obj1.contains(obj2);
    }else{
        return !!(obj1.compareDocumentPosition(obj2)-20)&&a!=b;
    }
}

jquery实现

	
	// 鼠标放入事件
	$("#yuan").on("mouseover", function(ev){
		// 防止子级元素阻挡事件造成失效
		var oEvent = ev || window.event;
        if(toAffect(this, oEvent, 'mouseover')){
        	console.log("移入")
        }
	})
	
	// 鼠标移开事件
	$("#yuan").on("mouseout", function(ev){
		// 防止子级元素阻挡事件造成失效
		var oEvent = ev || window.event;
	    if(toAffect(this, oEvent, 'mouseout')){
	    	console.log("移出")
		}
	})
	

JS实现

	var yuan = document.getElementById('yuan');

	yuan.onmouseover=function(ev){
	    var oEvent = ev || window.event;
	    if(toAffect(yuan, oEvent, 'mouseover')){
	        console.log("移入")
	    }
	
	}
	yuan.onmouseout=function(ev){
	    var oEvent = ev || window.event;
	    if(toAffect(yuan, oEvent, 'mouseout')){
	        console.log("移出")
	    }
	
	}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖