Question

忽略CSS，这并不重要。

此jQuery代码的目的是告诉与鼠标在.container内输入的方向相反的方向。我知道它看起来很难看，但请稍等一下。方向是n（北方），ne（东北方向），依此类推......

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

值undefined仅在x === 0 && y === 0中getMovementDirection()时才可用，这意味着mouse上的div.container位于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/

它不使用内置于mouseenter事件中的jquery，而是使用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");            
    }

我根本无法被“解雇”，但也许我只是不够抽搐

<强>更新

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

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

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

'mouseenter'事件记录鼠标从元素内部输入的内容

`jQuery code`

1 个答案: