1

请看这个小提琴

忽略 CSS，它并不重要。

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

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

值仅在inundefined时才可能，这意味着在输入时位于（球形按钮）内，这是不可能的。x === 0 && y === 0getMovementDirection()mousediv.containerdiv.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'; }
}
4

1 回答 1

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

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

于 2013-06-02T05:02:33.863 回答