div mouseout弹出隐藏漂浮框问题

简介: js中onMouseOut事件冒泡的问题在做页面的弹出漂浮窗体。例如下拉菜单时onmouseout让人非常不可思议,解决办法如下: 一、给标签增加事件监听 方法 function addEvent(el, evname, func) {     if (el.
js中onMouseOut事件冒泡的问题
在做页面的弹出漂浮窗体。例如下拉菜单时onmouseout让人非常不可思议,解决办法如下: 

一、给标签增加事件监听 方法 
function addEvent(el, evname, func) 

    if (el.attachEvent) 
    { 
        el.attachEvent("on" + evname, func); 
    }else if (el.addEventListener){ 
        el.addEventListener(evname, func, true); 
    } 
};
 

二、给firefox定义contains()方法,ie下不起作用(ie自身带有) 
if(typeof(HTMLElement)!="undefined") 

HTMLElement.prototype.contains=function(obj) 

  //通过循环对比来判断是不是obj的父元素 
  while(obj!=null&&typeof(obj.tagName)!="undefind") 
  { 
   if(obj==this) 
    return true; 
   obj=obj.parentNode; 
  }
 
  return false; 
}; 
}
 

三、隐藏函数 
function HideMyFunc(theEvent) 

if (theEvent) 

  var browser=navigator.userAgent;//取得浏览器属性 
  if (browser.indexOf("Firefox")>0) 
  { 
   //如果是Firefox 
   if (document.getElementById('divModifyCategory').contains(theEvent.relatedTarget)) 
   { 
    //如果是子元素 
    return;//结束函式 
   } 
  }
 
  if (browser.indexOf("MSIE")>0) 
  { 
   //如果是IE 
   if (document.getElementById('divModifyCategory').contains(event.toElement)) 
   { 
    //如果是子元素 
    return;  //结束函式 
   } 
  } 
}
 

//要执行的操作 隐藏或者是删除标签 
var divModifyCategory = document.getElementById("divModifyCategory"); 
if (divModifyCategory) 

  window.document.body.removeChild(divModifyCategory); 

}
 

四、为自创建的标签增加响应事件 
addEvent(divModifyCategory, 'mouseout', function(){HideMyCategory(arguments[0]);});
目录
相关文章
|
16天前
|
JavaScript
vue中轻松搞掂鼠标气泡框提示框tip跟随
vue中轻松搞掂鼠标气泡框提示框tip跟随
|
8月前
|
前端开发
前端——背景图片显示以及悬浮状态下变色的情况
前端——背景图片显示以及悬浮状态下变色的情况
|
4月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
|
5月前
|
前端开发
鼠标点击<input>输入框后边框发生颜色变化
鼠标点击<input>输入框后边框发生颜色变化
41 0
|
5月前
div层定位在网页右下角
div层定位在网页右下角
23 0
|
9月前
|
JavaScript
原生js实现复选框选全部框与取消全选框
原生js实现复选框选全部框与取消全选框
39 0
|
9月前
layui列表页滚动时弹出窗无法居中的解决方案
layui列表页滚动时弹出窗无法居中的解决方案
81 0
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
935 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
JavaScript 开发者
jQuery特效_隐藏与显示 | 学习笔记
快速学习jQuery特效_隐藏与显示
270 0
jQuery特效_隐藏与显示 | 学习笔记