onmouseout 事件 div浮动层闪动问题。

<script type="text/javascript">

function browserClass(){
    if( window.navigator.userAgent.indexOf("MSIE")>0)
    {
        return 'msie';    
    }
    if(window.navigator.userAgent.indexOf("Firefox")>0)
    {
        return "firefox";    
    }
}
    function hideBox(theEvent,obj){
        if(theEvent)
        {
            if(browserClass()=='msie')
            {
                if(document.getElementById(obj).contains(event.toElement))
                    return ;
            }
            else
            {
                if(document.getElementById(obj).contains(theEvent.relatedTarget))
                    return ;    
            }
            $("#"+obj).hide();
        
                    
        }

    }
    
$(document).ready(function(){
    //给firefow加contains方法
    if(typeof(HTMLElement)!="undefined")
    {
        HTMLElement.prototype.contains=function(obj)
        {
            while(obj!=null && typeof(obj.tagName)!="undefined")
            {
                if(obj==this) return true;
                obj = obj.parentNode;    
            }
            return false;    
        }    
    }
        $("#tanchu").click(
            function(){
                $("#tanchu").hide();    
            }
        );
        $("#catePop").click(
            function(){
                $("#catePop").hide();    
            }
        );
        $("#cate_a").html($("#classcate").val());
    });
    
    function popup(obj){
        if($("#"+obj).css("display")=="block")
             $("#"+obj).hide();
        else
            $("#"+obj).show();
            
    }

    function selectCate(id,obj){
        var obj = id=='cityTxt' ? obj+'站' : obj;
        $("#"+id).html(obj);
        if(id=="cate_a")
        {
            $("#classcate").val(obj);
        }
    }
        
</script>
<div id="sellerhead">
    <form action="{?$INDEX?}shop_result" method="get" name="seach_f">
    <div class="h_L">
            <a href="#" class="lco_a" onclick="popup('tanchu')"><span class="txt" id="cityTxt">杭州站</span></a>
            <div class="tanchu" id="tanchu" onmouseout="hideBox(event,'tanchu')" style="display:none">
                <dl>
                    <dt>华东地区：</dt>
                    <dd>
                        <ul>
                            <li><a href="#" onclick="selectCate('cityTxt','杭州')">杭州</a></li>
                            <li><a href="#" onclick="selectCate('cityTxt','南京')">南京</a></li>
                            <li><a href="#" onclick="selectCate('cityTxt','苏州')">苏州</a></li>
                        </ul>
                    </dd>
                </dl>
            </div>
    </div>
    <div class="h_C">
        <div class="seach">
        <input type="hidden" name="class" id="classcate" value="{?$classcate?}" />
            <div class="cate_div" onclick="popup('catePop')"><a href="#" id="cate_a">全部</a><span class="spanbg">&nbsp;</span></div>
            
            <ul class="catePop" id="catePop" onmouseout="hideBox(event,'catePop')" style="display:none">
                <li><a href="#" onclick="selectCate('cate_a','全部')">全部</a></li>
                <li><a href="#" onclick="selectCate('cate_a','美食')">美食</a></li>
                <li><a href="#" onclick="selectCate('cate_a','酒店')">酒店</a></li>
                <li><a href="#" onclick="selectCate('cate_a','休闲娱乐')">休闲娱乐</a></li>
                <li><a href="#" onclick="selectCate('cate_a','丽人')">丽人</a></li>
                <li><a href="#" onclick="selectCate('cate_a','购物')">购物</a></li>
            </ul>
            <input name="keyword" type="text" class="seach_txt"/>
        </div>
        <input name="seachbtn" type="submit" value="搜索" class="seachbtn" />
    </div>
    <div class="h_R">
        <ul>
            <li class="L"><a href="{?$INDEX?}shop_result">我要点评</a></li><li class="R"><a href="#">添加商家</a></li>
        </ul>
    </div>
    </form>
</div>

 

hideBox()

功能 是鼠标离开浮动层div时，浮动div要自动关闭。

可鼠标在div中间，与div内部元素移动时，div闪动。估用hideBox() 来 解决此问题。

原因是鼠标在div内部元素上移动 ，离开内部元素也会触发onmouseout  原因是子元素继承了父元素的onmouseout