一个 bug? IE 下的 onmouseout 事件, 请求支援..OR 支招

btbtd 2008-04-09 04:05:03
附件: http://groups.google.com/group/shawlqiu/web/XFadeLayout1_debug.7z

在 demo 下的 general.htm 里有演示..

问题是..
在IE 下.. 鼠标移动菜单上面时, 有一个弹出的层...我希望鼠标移动该层时, 该层不消失...离开时才消失...
在FF 下是没问题的...
今天这个鬼问题浪费了我好多时间...


...全文
497 31 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
31 条回复
切换为时间正序
请发表友善的回复…
发表回复
muxrwc 2008-04-10
  • 打赏
  • 举报
 回复
OP 9.2.7
FF 2.0.0.13
IE 6, 7

测试通过..

部分沉余没删:D
比如算位置的那个函数...
muxrwc 2008-04-10
  • 打赏
  • 举报
 回复 


XFadeLayout.js





/* 

shawl.qiu code

class: XFadeLayout

version: 1.0

date: 2008-4-9



updated: ver, name, date.

updated x: ver, name, date.

*/



function XFadeLayout(PMain)

{

 this.Ele = undefined;

 this.TagTree = 

  [

   "span"

   , [

      "a"

      ,"div"

     ]

  ];

  

 if(typeof Ele!=undefined)

 {

  this.Ele = fSetObjectX(PMain);

 }

 

 this.Path = "/QWJsLib/XFadeLayout/";

 this.Style = "default";

 

 this.Fade = {};

 this.Fade.WSpan = 20;

 this.Fade.HSpan = 20;

 this.Fade.Ms = 10;

 this.Fade.MinWidth = 160;

 this.Fade.Multiple = 20; 

 this.Fade.Sync = true;

 this.Fade.OutTimeout = 500;

 

 this.ZIndex = 1;

}//end function XFadeLayout()



XFadeLayout.prototype.Main = XFadeLayout_Main;

XFadeLayout.prototype.RelativePath = fRelativePath;





function XFadeLayout_Main()

{

 var This = this;

 for(var i=0, j=this.Ele.childNodes.length; i<j; i++)

 {

  var Child = this.Ele.childNodes[i];

  if(Child.nodeType!==1) continue;

  

  var ItemMain = Child.getElementsByTagName("span")[0];

  ItemMain.style.display = "block";

  var Info = fGetXYWH(ItemMain);

  ItemMain.style.display = "none";

  

  var Item = Child.getElementsByTagName(this.TagTree[1][1])[0];

  

  if(Info.Width<This.Fade.MinWidth) Info.Width = This.Fade.MinWidth;

  

  if(This.Fade.Sync)

  {

   This.Fade.WSpan = Info.Width/This.Fade.Multiple;

   This.Fade.HSpan = Info.Height/This.Fade.Multiple;

  }

     

  Item.style.width = "0px";

  Item.style.height = "0px";

  

  

  Item.style.display = "none";



  Child.ItemMain = ItemMain;

  Child.Item = Item;

  Child.Info = Info;

  

   

  Child.onmouseover = 

   function(e)

   {

//     XCancleBubble(e);

//     XPreventDefault(e);

    var EThis = this;

    var Item = this.Item;

    var Info = this.Info;

    var ItemMain = this.ItemMain;



    var Pos = fGetXYWH(this);

    

    Item.style.display = "block";

    //Item.style.top = this.offsetTop+this.offsetHeight+"px";

    //Item.style.left = this.offsetLeft+"px";

    

    if(EThis.Interval!=null) return;

    if(EThis.OutInterval) 

    {

     clearInterval(EThis.OutInterval);

     EThis.OutInterval = null;

    }

    

    Item.style.zIndex = ++This.ZIndex;

    

    this.Interval = 

     setInterval 

     (

      function()

      {

       var ItemWidth = Item.offsetWidth;

       var ItemHeight = Item.offsetHeight;

       

       var NItemWidth = ItemWidth+This.Fade.WSpan;

       var NItemHeight = ItemHeight+This.Fade.HSpan;

       

       if(NItemWidth>=Info.Width||NItemHeight>=Info.Height) 

       {

        NItemWidth = Info.Width+20;

        NItemHeight = Info.Height+15;

       }

       

       //defaultStatus = ItemWidth+This.Fade.WSpan

       

       Item.style.width = NItemWidth+"px";

       Item.style.height = NItemHeight+"px";

       //Item.style.border = "1px solid black"

              

       

       defaultStatus = ItemMain.style.width

       

       if(NItemWidth>=Info.Width&&NItemHeight>=Info.Height)

       {

        clearInterval(EThis.Interval);

        EThis.Interval = null;

        

        //ItemMain.className = "FadeLayoutMain_ItemMain"; 

        

       }

      }

      , This.Fade.Ms

     );

   }//end function(e)[Child.onmouseover]

   

  Child.onmouseout =

   function(e)

   {

//     //TextEle.style.display = "none";

//     XCancleBubble(e);

//     XPreventDefault(e);

    var EThis = this;

    var Item = this.Item;

    var Info = this.Info;

    var ItemMain = this.ItemMain;

    

    if(EThis.Interval!=null) 

    {

     clearInterval(EThis.Interval);

     EThis.Interval = null;

    }

    if(EThis.OutInterval!=null) return;

    //ItemMain.style.display = "none";

;

    this.OutInterval = 

     setInterval 

     (

      function()

      {

       var ItemWidth = Item.offsetWidth;

       var ItemHeight = Item.offsetHeight;

       

       var NItemWidth = ItemWidth-This.Fade.WSpan;

       var NItemHeight = ItemHeight-This.Fade.HSpan;

       

       if(NItemWidth<=0||NItemHeight<=0) NItemWidth = NItemHeight = 0;

       

       Item.style.width = NItemWidth+"px";

       Item.style.height = NItemHeight+"px";

	   

       if(NItemWidth===0&&NItemHeight===0)

       {

        clearInterval(EThis.OutInterval);

        EThis.OutInterval = null;

        

        Item.style.display = "none";

       }

      }

      , This.Fade.Ms

     );

   }

 }//end for(var i=0, j=this.Ele.childNodes.length; i<j; i++)

 

}//end function XFadeLayout_Main()



function fGetXYWH(Ele)

{

 var a = new Array();

 var t = Ele.offsetTop;

 var l = Ele.offsetLeft;

 var w = Ele.offsetWidth;

 var h = Ele.offsetHeight;

 

 while(Ele = Ele.offsetParent)

 {

  t += Ele.offsetTop;

  l += Ele.offsetLeft;

 }

 

 return {Top:t, Left:l, Width:w, Height:h};

}//end function fGetXYWH(Ele)



function fSetObjectX(Obj, sMsg, Dcu, bNoAlter)

{// shawl.qiu code, return Element

 if(!sMsg) sMsg = "无法获得对象!";

 if(!Dcu) Dcu = document;

 if(!bNoAlter) bNoAlter = false;

 

 switch(Obj.constructor)

 {

  case String: Obj = Dcu.getElementById(Obj); break;   

  case Array: Obj = Obj[0]; break;

 }

 

 if(Obj==null&&bNoAlter==false) throw new Error(sMsg);

 

 return Obj;

} // end function fSetObjectX(OldObj, NewObj, sMsg)



function fRelativePath(sRelative)

{// shawl.qiu code, return string 

 var sUrl = document.URL;

 sUrl = sUrl.replace(/^.*?\:\/\/[^\/]+/, "").replace(/[^\/]+$/, "");

 if(!sRelative){return sUrl;}

 

 if(!/\/$/.test(sUrl)){sUrl += "/";}

 

 if(/^\.\.\//.test(sRelative))

 {

  var Re = new RegExp("^\\.\\.\\/"), iCount = 0;

  

  while(Re.exec(sRelative)!=null)

  {

   sRelative = sRelative.replace(Re, "");

   iCount++;

  }   

  

  for(var i=0; i<iCount; i++){sUrl = sUrl.replace(/[^\/]+\/$/, "");}

  

  if(sUrl=="") return "/";  

  return sUrl+sRelative;

 }   

 sRelative = sRelative.replace(/^\.\//, ""); 

 return sUrl+sRelative;

} // end function fRelativePath(sRelative)



function fSetOpacity(XEle, iAlpha)

{//shawl.qiu code, void return

 XEle.style.opacity = iAlpha/100;

 XEle.style.filter = 'alpha(opacity=' + iAlpha + ')';

}//end function fSetOpacity(XEle, iAlpha)



function fEventElement(e)

{//shawl.qiu code, return Element

 e = e||window.event;

 var Ele = e.target||e.srcElement; 

 return Ele;

}// end function fEventElement(e)



function XCancleBubble(e)

{//shawl.qiu code, void return

 if (e && e.stopPropagation ) e.stopPropagation();

 else window.event.cancelBubble = true;

}//end function XCancleBubble(e)



function XPreventDefault(e)

{//shawl.qiu code, void return

 if (e && e.preventDefault ) e.preventDefault();

 else window.event.returnValue = false;

 return false;

}//end function XPreventDefault(e)
muxrwc 2008-04-10
  • 打赏
  • 举报
 回复 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>shawl.qiu template</title>

<style type="text/css">

/* <![CDATA[ */



.FadeLayoutMain

{

 width: 600px;

 margin: 20px auto;

}



.FadeLayoutMain span {

	float:left;

	display:block;

	width:100px;

	background-color:#CCCCCC;

	margin-right:2px;

	text-align:center;

	position:relative;

}



.FadeLayoutMain span div

{

 position:absolute;

 border:1px solid black;

 background-color:#FFFFFF; /*核心BUG哈哈。。。div不得background-color:transparent;*/

 left:0;

}



.FadeLayoutMain span a.title {

	display:block;

}



.FadeLayoutMain span div span a

{

 display:block;

}



.FadeLayoutMain_ItemMain

{

 display:block!important;

 padding: 5px;

}

/* ]]> */

</style>

<script type="text/javascript">

//<![CDATA[

	if (navigator.appName=="Microsoft Internet Explorer") {

		//最大化窗口

		self.moveTo(-5,-5)

		self.resizeTo(screen.availWidth +8,screen.availHeight+8)

		//这个脚本定义的宽度其实比原窗口还要大那么一点.

	}

//]]>

</script>

</head>

<body>



<!--

 {div:{span:{}}

-->

<div id="FadeLayoutMain" class="FadeLayoutMain" style="background-color:#000000;">

 <span>

   <a href="#menu1" class="title">menu1</a>

   <div>

    <span>

     <a href="#sub1_1">#sub1_1</a>

     <a href="#sub1_2">#sub1_2</a>

     <a href="#sub1_3">#sub1_3</a>

     <a href="#sub1_4">#sub1_4</a>

     <a href="#sub1_5">#sub1_5</a>

     <a href="#sub1_6">#sub1_6</a>

     <a href="#sub1_7">#sub1_7</a>

     <a href="#sub1_8">#sub1_8</a>

     <a href="#sub1_9">#sub1_9</a>

     <a href="#sub1_10">#sub1_10</a>

    </span>

   </div>

 </span>

 <span>

   <a href="#menu2" class="title">menu2</a>

   <div>

    <span>

     <a href="#sub2_1">#sub2_1</a>

     <a href="#sub2_2">#sub2_2</a>

     <a href="#sub2_3">#sub2_3</a>

     <a href="#sub2_4">#sub2_4</a>

     <a href="#sub2_5">#sub2_5</a>

     <a href="#sub2_6">#sub2_6</a>

     <a href="#sub2_7">#sub2_7</a>

     <a href="#sub2_8">#sub2_8</a>

     <a href="#sub2_9">#sub2_9</a>

     <a href="#sub2_10">#sub2_10</a>

    </span>

   </div>

 </span>

</div>





<script type='text/javascript' src='../XFadeLayout.js'></script>

<script type="text/javascript">

//<![CDATA[

 var Xfl = new XFadeLayout("FadeLayoutMain");

 Xfl.Path = Xfl.RelativePath("../FadeLayout/");

 Xfl.Main();

 Xfl = null;

 

// TagTree = 

//  [

//   "div"

//   , [

//      "span"

//      , [

//         "a"

//         ,"div"

//        ]

//     ]

//  ];

 

//]]>

</script>



</body>

</html>
muxrwc 2008-04-10
  • 打赏
  • 举报
 回复
T_T
传说沙发有100分...
所以我才貌死抢的...

引用
这次去北京没好好和大家聚下，那个时候在开会，怕在外面太久不好。

那日一见...徐博前辈果然气宇不凡....:D
一把编程的菜刀 2008-04-10
  • 打赏
  • 举报
 回复
加把劲
btbtd 2008-04-10
  • 打赏
  • 举报
 回复
问题解决...整理后再说...
一把编程的菜刀 2008-04-10
  • 打赏
  • 举报
 回复
也不能算是IE的BUG吧
btbtd 2008-04-10
  • 打赏
  • 举报
 回复
哦...
感谢WC, 感谢各位关注...
问题解决了, 内容也整理好了...
附件:
http://shawlqiu.googlegroups.com/web/XFadeLayout1.7z?gda=4aHRZEAAAACki1S8WUbyiINVId1-w8V9_deS1V4ZDXrVAfmM8Wb54WG1qiJ7UbTIup-M2XPURDQ6CrxK_9b4-1JvOm-LANgw&gsc=9hCvVQsAAAB8ZJS9wN5JOknFYlvEVkse

但又发现了一个IE的BUG...以后有时间再研究喽...

xql80329 2008-04-10
  • 打赏
  • 举报
 回复
看不了你的DEMO 关注
xingqiliudehuanghun 2008-04-10
  • 打赏
  • 举报
 回复
关注下
hbhbhbhbhb1021 2008-04-09
  • 打赏
  • 举报
 回复
这样可以


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>no-bug</title>

</head>



<body>

<div style="width:100px; height:130px;">

    <span style="background-color:#F4F4F4;display:block;"

        onmouseover="if(!this.contains(event.fromElement)){document.getElementById('a').style.display = 'block'}"

        onmouseout="if(!this.contains(event.toElement)){document.getElementById('a').style.display='none'}"

    >

        <a style="height:30px;line-height:30px;">a</a>

        <div style="clear:both;"></div>

        <div id="a" style="display:none;background:#FF0000;width:20px;height:100px;">

            <span><a>v</a></span>

        </div>

    </span>

</div>

</body>

</html>


下面还有一个JK以前写的一段分析
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head>

<body >
<pre>

关于mouseover 和 mouseout，JK的理解是：

1.this:指代触发事件的对象
2.fromElement:event.fromElement
3.toElement:event.toElement

IE的做法似乎是：
如果 (fromElement!=toElement) && (toElement ∈ this) 就触发onmouseover事件一次
如果 (fromElement!=toElement) && (fromElement ∈ this) 就触发onmouseout事件一次

见下例，鼠标在下图区移动，注意五个input里值的变化。
</pre>

<div id=span1 style="border: 10px solid red"
onmouseover="ieMouseOver.value=ieMouseOver.value*1+1;if(!this.contains(event.fromElement)) ourMouseOver.value=ourMouseOver.value*1+1;"
onmouseout="ieMouseOut.value=ieMouseOut.value*1+1;if(!this.contains(event.toElement)) ourMouseOut.value=ourMouseOut.value*1+1;"
onmousemove="ieMouseMove.value=ieMouseMove.value*1+1;"
>span1
<div style="background-color: #E0FFF0" style="border: 10px solid blue;" >  span2 
<div style="background-color: #E0FFF0" style="border: 10px solid yellow" >  span3 
</div>
 span2 
</div>
 span1 
</div>

ie mouseOver:<input id=ieMouseOver><br/>
ie mouseOut:<input id=ieMouseOut><br/>
mouseMove:<input id=ieMouseMove><br/>
our mouseOver:<input id=ourMouseOver><br/>
our mouseOut:<input id=ourMouseOut><br/>

</body>

</html>
hbhbhbhbhb1021 2008-04-09
  • 打赏
  • 举报
 回复
以前有过类似的帖子
http://topic.csdn.net/t/20041025/09/3487387.html
顺便BS下王好奇，抢沙发，
这次去北京没好好和大家聚下，那个时候在开会，怕在外面太久不好。
mataofq 2008-04-09
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 luxu001207 的回复:]
BS楼上的占了三层楼...
[/Quote]
哈哈哈哈哈，小帅哥遭人”唾弃“咯～～～
不过方案还是很可行的啊。赞一个
一把编程的菜刀 2008-04-09
  • 打赏
  • 举报
 回复
IE下，SPAN和DIV解析与FF有区别
这里红色部分的span换成DIV就没问题了，然后定义下DIV的问题就可以了

<div id="FadeLayoutMain" class="FadeLayoutMain">
<span>
<a href="#menu1">menu1</a>
<div>
<span>
<a href="#sub1_1">#sub1_1</a>
<a href="#sub1_2">#sub1_2</a>
<a href="#sub1_3">#sub1_3</a>
<a href="#sub1_4">#sub1_4</a>
<a href="#sub1_5">#sub1_5</a>
<a href="#sub1_6">#sub1_6</a>
<a href="#sub1_7">#sub1_7</a>
<a href="#sub1_8">#sub1_8</a>
<a href="#sub1_9">#sub1_9</a>
<a href="#sub1_10">#sub1_10</a>
</span>
</div>
</span>
<span>
<a href="#menu2">menu2</a>
<div>
<span>
<a href="#sub2_1">#sub2_1</a>
<a href="#sub2_2">#sub2_2</a>
<a href="#sub2_3">#sub2_3</a>
<a href="#sub2_4">#sub2_4</a>
<a href="#sub2_5">#sub2_5</a>
<a href="#sub2_6">#sub2_6</a>
<a href="#sub2_7">#sub2_7</a>
<a href="#sub2_8">#sub2_8</a>
<a href="#sub2_9">#sub2_9</a>
<a href="#sub2_10">#sub2_10</a>
</span>
</div>
</span>
</div>
btbtd 2008-04-09
  • 打赏
  • 举报
 回复
有可能像楼上说的.............
子标签在奕大小事..父标签宽高没变...
然后一移动出父标签的宽高...IE就触发 onmouseout 事件...

解决办法...还没弄...
muxrwc 2008-04-09
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>no-bug</title>

</head>



<body>

<div style="width:100px;background:#000000; height:130px;">

    <span style="background-color:#F4F4F4;display:block;"

    	onmouseover="document.getElementById('a').style.display = 'block'"

        onmouseout="document.getElementById('a').style.display='none'"

    >

        <a style="height:30px;line-height:30px;">a</a>

        <div style="clear:both;"></div>

        <div id="a" style="display:none;position:absolute;background:#FF0000;width:20px;height:100px;">

            <span><a>v</a></span>

        </div>

    </span>

</div>

</body>

</html>

这样测试是没问题的.
是不是IE里.变大的过程中鼠标移动到范围外了?
所以导致隐藏...
muxrwc 2008-04-09
  • 打赏
  • 举报
 回复
T_T
不对...弄错了...
btbtd 2008-04-09
  • 打赏
  • 举报
 回复
11楼发的啥..不懂.. 公厕兄那个貌似可行...不过还没调试...
muxrwc 2008-04-09
  • 打赏
  • 举报
 回复
一个在右边
一个在下边..

右边的那个貌似已经脱离了parent

我测试的时候
toElement是先html的
郁闷..
如果用下面的那种结果.
我想
toElement
or
relatedTarget
就应该是div了.
muxrwc 2008-04-09
  • 打赏
  • 举报
 回复
大概的区别看下面代码...
:D
实在不行就改结构..
偶CSS不太熟悉...想用上面的结构实现下面的效果...还不会...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>



<body>

<span style="background-color:#000000;">

	<a>a</a>

    <div style="position:absolute;background:#FF0000;">

    	<span><a>v</a></span>

    </div>

</span>

<ul>

    <li style="background-color:#000000;">

        <li>

            <a>a</a>

            <ul style="position:absolute;background:#FF0000;">

                <li>字</li>

            </ul>

        </li>

    </li>

</ul>

</body>

</html>
加载更多回复（11）
onmouseover和onmouseout事件小结
前言 onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中触发的事件,而onmouseout是移除dom元素触发的事件. 说明 我们对最外面的红色框分别绑定onmouseover和onmouseout事件,鼠标进入dom元素时打印"进入",离开dom元素时打印"离开" 鼠标进入红色框的子元素灰色框时会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover...
IE中的事件对象window.event
和dom中的事件对象做对比： 几个重要的方法和属性分别是： （1）事件类型：同为type属性； （2）事件作用目标：ie为srcElement属性； （3）阻止事件冒泡：ie为canceBubble属性；（设置为ture为阻止冒泡，false为允许）； （4）阻止事件默认行为：ie为retureValue属性；（设置为ture为阻止，false是允许）； 同样通过判断浏览器的能力来选择
html当鼠标离开时触发事件,html中在鼠标指针移动到元素外时触发的事件属性onmouseout...
实例当鼠标指针移动到图像之外时执行一段 JavaScript：浏览器支持IEFirefoxChromeSafariOpera所有主流浏览器都支持 onmouseout 属性。定义和用法onmouseout 属性在鼠标指针移动到元素外时触发。注释：onmouseout 属性不适用以下元素：、、、、、、、、、 或 。HTML 4.01 与 HTML5 之间的差异无。语法属性值值描述scriptonmo...
JavaScript中的onmouseover事件和onmouseout事件实例
目录 JavaScript事件 onmouseover事件 onmouseout事件： onmouseover和onmouseout事件结合案例： HTML部分 CSS部分 javascript部分 最终效果： JavaScript事件 事件可以是浏览器行为，也可以是用户行为！ 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点...
onmousemove、onmouseout事件
首先我们看文章之前，得把onmousemove和onmouseout搞明白到底是个什么东西来的，先看理论： onmousemove：事件会在鼠标指针移动到指定的对象上时发生。 onmouseout：事件会在鼠标指针移出指定的对象时发生。 简单点来说就是一个是移入进去时触发，一个是移出时触发，也可以叫它们为移入事件和移出事件。 话不多说，先来看一组代码，如下： 可以看出我HTML给了一个div，是一个正方形，里面带了...
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章