'mouseenter' 事件记录鼠标从元素内部进入

Question

请看this fiddle

忽略 CSS，它不重要。

这个jQuery 代码的目的是告诉与鼠标进入.container 的方向相反的方向。我知道它看起来很丑陋，但请暂时忽略它。方向为n（北）、ne（东北）等...

现在，如果您像疯子一样打开console 并在div.container 周围移动鼠标，最终您会在console 中看到undefined。 （div.container 是不可见的，并且围绕着圆形按钮）

值undefined只有当getMovementDirection()中的x === 0 && y === 0才可能，这意味着输入div.container时mouse在div.button（球形按钮）内，这是不可能。

那么，我的问题是，这段代码发生了什么？

-感谢您的帮助

PS: 标题需要改进。

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

这可能不是最优雅的解决方案，甚至不是修复方法，但我用另一种获取鼠标数据的方式更新了小提琴：

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

它不使用jquery内置的mouseenter事件，而是使用js原生的mouseover事件，当mouseover是按钮时它会忽略。我认为 jquery 的执行方式可能会产生一些额外的开销（我根本没有查看它的代码），所以为什么不将其精简为更基本的东西。另外，我从这里偷了 addevent 代码：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");            
    }

我根本无法让“wut”被解雇，但也许我只是不够紧张

更新

这是在每次鼠标悬停时运行以执行 mouseenter 行为的 jquery 代码

// 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;
        }
    };
});

如果在不同的元素上重新运行一些处理代码，可能会出现一些延迟。