1

このフィドルを見てください

CSS は無視します。重要ではありません。

このjQueryコードの目的は、マウスが 内に入った方向と反対の方向を伝えること.containerです。見栄えの悪い関数であることは承知していますが、しばらく無視してください。方向は、n(北の場合)、ne(北東の場合) などです...

を開き、マニアックにconsoleマウスを動かすと、最終的に が表示されます。(は非表示で、円形のボタンを囲んでいます)div.containerundefinedconsolediv.container

値はinのundefined場合にのみ可能です。これは、を入力すると(球形のボタン)内にあることを意味しますが、これは不可能です。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ネイティブのマウスオーバーイベントを使用し、マウスオーバーがボタンの場合は無視します。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 に答える