寻找实现mouseleave的简单方法~
————————-
有bug~
————————-

在非ie浏览器(firefox,safari…)里,只要子元素触发了mouseout便会冒泡到父级元素,所以用js实现hover式的下拉菜单时就需要hack一下了~

下面的代码仅针对ff,safari等非ie内核浏览器~

<script>
(function()
{
    function ismouseleave( event , element )
    {
    	var p = event.relatedTarget;
		while ( p && p != element ) try { p = p.parentNode; } catch( error ) { p = element; }
		return p !== element;
    }
 
    var onmouseleave = {};
 
    addEvent = function( element , name , func , useCapture )
    {
        if ( name == 'mouseleave' )
        {
            onmouseleave[ func ] = onmouseleave[ func ] || function( e )
            {
                if ( ismouseleave( e , element ) ) func.call( element , e );
            };
            element.addEventListener( 'mouseout' , onmouseleave[ func ] , useCapture );
            return element;
        }
		element.addEventListener( name , func , useCapture );
		return element;
    };
 
    delEvent = function( element , name , func ,useCapture )
    {
        if ( name == 'mouseleave' )
        {
            element.removeEventListener( 'mouseout' , onmouseleave[ func ] , useCapture );
            return element;
        }
        element.removeEventListener( name , func , useCapture );
        return element;        
    };
})();
</script>
<html>
    <body>
        <div id="test" line="0" run="1" >
            leave me
            <span style="background:#000;color:#fff;">
            leave me
            </span>
            leave me
        </div>
    </body>
</html>
<script>
    addEvent( document.getElementById('test') , 'mouseleave' , function()
    {
        alert( 'mouse leave!' );
        delEvent( this , 'mouseleave', arguments.callee );
    });
</script>
Copy Code | Run Code