'mouseenter' event recording that mouse entered from inside the element

Question

Please see this fiddle

Ignore CSS, its not important.

The purpose of this jQuery code is to tell the direction opposite to the direction from which mouse entered inside the .container. I know its an ugly looking function but please ignore that for a while. The direction is in terms of n (for north), ne (for north-east), and so on ...

Now if you open the console and move the mouse around the div.container like a maniac, eventually you will see undefined in the console. (div.container is invisible and surrounds the circular button)

Value undefined is only possible if x === 0 && y === 0 in getMovementDirection(), which means that mouse on entering the div.container was inside the div.button (spherical button), which is not possible.

So, my question is, what's going on in that code?

-Thanks for help

PS: Title needs improvement.

jQuery code

(function($) {
    var $container = $('div.container'),
        $button = $('div.button');

    $container.on('mouseenter', function(e) {
        var mouseLocation = {
            x: e.pageX,
            y: e.pageY
        }
        var buttonLocation = {
            x: $button.offset().left,
            y: $button.offset().top
        }

        var loc = getMovementDirection (mouseLocation, buttonLocation, jQuery);
        console.log(loc);
    });
})(jQuery);

function getMovementDirection (mouse, container, $) {
    var width = $('div.button').outerWidth(),
        height = $('div.button').outerHeight();
    var x, y;

    if (mouse.x < container.x) { x = -1; }
    else if (mouse.x < container.x + width) { x = 0; }
    else { x = 1; }

    if (mouse.y < container.y)  { y = -1; }
    else if (mouse.y < container.y + width) { y = 0; }
    else { y = 1; }

         if ( x === -1 && y === -1 ) { return 'se'; }
    else if ( x ===  0 && y === -1 ) { return 's';  }
    else if ( x ===  1 && y === -1 ) { return 'sw'; }
    else if ( x === -1 && y ===  0 ) { return 'e';  }
    // x === 0 && y === 0 is forbidden
    else if ( x ===  1 && y ===  0 ) { return 'w';  }
    else if ( x === -1 && y ===  1 ) { return 'ne'; }
    else if ( x ===  0 && y ===  1 ) { return 'n';  }
    else if ( x ===  1 && y ===  1 ) { return 'nw'; }
}

Answer 1

this might not be the most elegant solution or even the fix, but I updated the fiddle with a different way of getting the mouse data:

http://jsfiddle.net/e3XNm/3/

it doesnt use the jquery built in mouseenter event, but rather the js native mouseover event, and it ignores when mouseover is of the button. I figured there might be some extra overhead with how jquery is doing it (i didnt look at the code for it at all), so why not trim it down a bit to something more basic. also, i stole the addevent code from here: http://ejohn.org/projects/flexible-javascript-events/

addEvent( $container[0], 'mouseover', function (e) {
    if (e.target === $button[0])
        return;

    // get event details here

    var loc = getMovementDirection(mouseLocation, buttonLocation, jQuery);

    // debugging
    if (loc != undefined) {
        var width = $('div.button').outerWidth(),
            height = $('div.button').outerHeight();
        console.log(mouseLocation.x, mouseLocation.y, buttonLocation.x, buttonLocation.y, width, height);
        console.log(loc);
    } else {
        console.log("wut");            
    }

i couldnt get "wut" to be fired at all, but maybe im just not twitchy enough

Update

This is the jquery code that runs on every mouseover to execute the mouseenter behavior

// Create mouseenter/leave events using mouseover/out and event-time checks
jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout"
}, function( orig, fix ) {
    jQuery.event.special[ orig ] = {
        delegateType: fix,
        bindType: fix,

        handle: function( event ) {
            var ret,
                target = this,
                related = event.relatedTarget,
                handleObj = event.handleObj;

            // For mousenter/leave call the handler if related is outside the target.
            // NB: No relatedTarget if the mouse left/entered the browser window
            if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
                event.type = handleObj.origType;
                ret = handleObj.handler.apply( this, arguments );
                event.type = fix;
            }
            return ret;
        }
    };
});

Some delay may be occurring if its rerunning some handling code on a different element.