[求教:JS控制table中td隐藏显示问题]

Question

　　今天突然发现一问题，　　我在table　的td中放了个lable　还有iframe　我在JS写的方法是当鼠标移开这个td的时候就隐藏，
　但我发现当把鼠标放在lable和iframe显示的内容之间时，这个td也隐藏了，按理说鼠标现在应该还是停留在td内，
如果在td内那么这个td就不该隐藏的
下面是html代码,附一张图如下,希望高手指点下：
 <table class="frameTable" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="frameLeft" id="left" valign="top" style="display: block;" onmouseout="OutSplit();"><!-- 这里！！！   -->
                                <label class="leftLabel">
                                    功能列表 <a href="#">锁定</a></label>
                                <!-- 在同一个TD里面。加入一个LABEL。可以防止IFRAME的横向滚动条出现，去掉LABEL后横向滚动条会出现 -->
                                <iframe height="100%" width="100%" id="leftWindow" frameborder="0" src="Frameleft.aspx">
                                </iframe>
                            </td>
                            <td class="Noprint" style="width: 12px;">
                                <img id="split" src="../app_themes/default/images/open.gif" style="display: none"
                                    alt="" onmouseover="OverSplit();" />
                            </td>
                            <td class="frameRight">
                                <iframe height="100%" width="100%" id="rightWindow" name="rightWindow" frameborder="0">
                                </iframe>
                            </td>
                        </tr>
                    </table>　Js代码var left=document.getElementById("left");
function OutSplit()
        {          
           var browsertype;
            
            if(navigator.userAgent.indexOf("MSIE")>0)
            {
                browsertype="block";
            }
            else
            {
                browsertype="table-cell";
            }
            
            if(left.style.display=="none")
            {
                left.style.display=browsertype;
                split.src="../app_themes/default/images/close.gif";
            }
            else
            {                 
                left.style.display="none";  
                split.style.display=browsertype;                      
                split.src="../app_themes/default/images/open.gif";
            }
            
        }

Answer 1

        <td class="frameLeft" id="left" valign="top" style="display: block;" onmouseout="OutSplit();"><!-- ﾙ女｢！！！   -->
        <div style="width:100%;height:100%">
            <label class="leftLabel">
                功能列表 <a href="#">
葡・/a></label>
            <!-- 在同一个TD里面。加入一个LABEL。可以防止IFRAME的横向ﾚnｨR条出ｰs，去掉LABEL后横向ﾚnｨR条会出ｰs -->
            <iframe height="100%" width="100%" id="leftWindow" frameborder="0" src="Frameleft.aspx">
            </iframe>
            </div>
        </td>

Answer 2

楼上我之前就这样试过．．还是不行．我把onmouseout="OutSplit();"写在div里也　一样．．
 <div style="width:100%;height:100%" onmouseout="OutSplit();">　

Answer 3

你用display="none"表示td这个块从流中祛除了 也就不存在在td内外的问题了 因为根本就没有这个td了
使用visibility吧

Answer 4

onmouseout="OutSplit();"要写在td里

Answer 5

我是写在td里的,不行,,我就放div里了..

Answer 6

应该说这是个bug，当你在父标签用了onmouseout函数，子标签“之间”也会产生这个效果。的确比较难看。
不知道哪位大湿有解决方法！

Answer 7

<table class="frameTable" cellpadding="0" cellspacing="0">
    <tr>
        <td class="frameLeft" id="left" valign="top" style="display: block;"><!-- ﾙ女｢！！！   -->
        <div style="width:100%;height:100%;margin:0px;border:0px;padding:0px;background:#aaa;z-index:1;">
            <label class="leftLabel">
                功能列表 <a href="#">
葡・/a></label>
            <!-- 在同一个TD里面。加入一个LABEL。可以防止IFRAME的横向ﾚnｨR条出ｰs，去掉LABEL后横向ﾚnｨR条会出ｰs -->
            <iframe height="100%" width="100%" id="leftWindow" frameborder="0" src="Frameleft.aspx">
            </iframe>
        <div style="width:100%;height:110%;margin-top:-186px;z-index:2;filter:alpha(style=0,opacity=0);background:#fff" onmouseout="alert(1)"></div>
            </div>
        </td>
        <td class="Noprint" style="width: 12px;">
            <img id="split" src="../app_themes/default/images/open.gif" style="display: none"
                alt="" onmouseover="OverSplit();" />
        </td>
        <td class="frameRight">
            <iframe height="100%" width="100%" id="rightWindow" name="rightWindow" frameborder="0">
            </iframe>
        </td>
    </tr>
</table>

Answer 8

楼上,按你这样写还是不行,  帮人帮到底,也许你自己按这个Table布局建个页面,测试可能会更快解决这问题..

Answer 9

这个应该是发生在IE内的现象吧：
可以这么解决：
检查鼠标移出时的目的对象toEl在不在td内部，如在td内部，不执行改变样式的方法，反之则执行；
至于捕获onmouseout事件的目的对象，可以用toEl = event.toElement获取，
再用left.contains(toEl)检查toEl是否在left之内。

Answer 10

<table class="frameTable" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="frameLeft" id="left" valign="top" style="display: block;" onmouseout="OutSplit();" onmouseover="OverSplit();"><!-- 这里！！！   -->
                                <label class="leftLabel">功能列表 <a href="#">锁定</a></label>
                                <!-- 在同一个TD里面。加入一个LABEL。可以防止IFRAME的横向滚动条出现，去掉LABEL后横向滚动条会出现 -->
                                <iframe height="100%" width="100%" id="leftWindow" frameborder="0" src="http://g.cn">
                                </iframe>
                            </td>
                            <td class="Noprint" style="width: 12px;">
                                <img id="split" src="../app_themes/default/images/open.gif" style="display: none" alt="" onmouseover="" />
                            </td>
                            <td class="frameRight">
                                <iframe height="100%" width="100%" id="rightWindow" name="rightWindow" frameborder="0">
                                </iframe>
                            </td>
                        </tr>
                    </table>
<script type="text/javascript">
var timer = null;
function OutSplit(){
var ele = document.getElementById('left');
timer   = setTimeout(function(){ele.style.display = 'none';},500); 
}
function OverSplit(){
if(timer){
clearTimeout(timer);
}
}
</script>

Answer 11

怎么个不行，你把alert改成你的OutSplit就行了啊，再说这只是个方法，具体还需要你自己来写

Answer 12

#19楼jamix (jamix) 能不能讲解下,为什么这样处理?  

Answer 13

针对你这个问题，回去我重新了学习了下js
这个在js里有个术语叫冒泡。
var timeOuter;
setTimeOuter
clearTimeOuter
你可以去搜索下。具体代码我没写，但是我看到实际的效果了。