1

私は少し問題があり、それを処理する方法がわかりません。私はカスタムマウスを持っていて、jQueryのmousemove関数で作成しました（以下はカーソル画像です）：

$('.mainBody').mousemove(function(e){
            $('.follow').show();
            $('.mainBody').css('cursor', 'none');               
            $(".follow").css({left:e.pageX-40, top:e.pageY-150}); });

htmlコードは次のようになります。

<div class="mainBody">
        <a href="index2.html" class="button1"></a>
        <div class="follow"></div>
</div>

そして、マウスがどこかをクリックしたときにカスタム画像を作成しました。

$('.mainBody').click( function(){
        $(".follow").css({background:'url("images/cursor_click.png")', width: 210, height:210});
        $(".follow").animate({ opacity: 1 }, 200, function(){
            $(".follow").css({background:'url("style/images/cursor.png")', width: 115, height:185});
        });
});

このクリックコードでは、0.2秒間、別の画像が表示され、通常の状態に戻ります。そして、別のクリック関数を作成しようとすると、問題が発生します。

        $('.button1').click( function(){
            alert('clicked');
        });

クラスbutton1をクリックしても、アラートが表示されません。私はに変更しようとしましたが、それでも何もしませんでした、そしてこのコードを試しました：

        $('.mainBody').click( function(){
            $(".follow").css({background:'url("style/images/cursor_click.png")', width: 210, height:210});
            $(".follow").animate({ opacity: 1 }, 200, function(){
                $(".follow").css({background:'url("style/images/cursor.png")', width: 115, height:185});
            });
            $('.button1').click( function(){
                alert('clicked');
            });
        });

、しかしまだ何もありません。私はたくさんの動きを試しましたが、何も役に立ちませんでした。多分あなたは問題がどこにあるか知っていますか？

$('.mainBody').click(...);ハンドラーを削除$('.button1').click(...)しても機能しないので、問題があるのではないでしょmousemoveうか。

4

1 に答える 1

1

問題は、クリック$('.follow')が常に実際のマウスカーソルの下にあるため、クライアントがクリック以外のクリックを認識しないことです。イベントはより深く見えないため、他のすべては無視されます.follow。このような方法でカーソルを変更することはお勧めしません。cssカーソル設定を使用すると、この問題は解消されます。

編集：

したがって、これらの巨大なカーソルを100％使用する必要がある場合は、クリックイベントを少し異なる方法で処理できます。まずdom、クリックをリッスンする必要がある可能性のあるすべての要素について、ツリー内のすべての位置を記録します。

function record_node_positions() {
    window.nodes = {
        node : {}
    };
    $( 'body *' ).each(function( index ) {
        window.nodes.node[ $( this ).attr( 'id' ) ] = {
            id      : $( this ).attr( 'id' ),           

            top     : $( this ).offset().top,
            left    : $( this ).offset().left,
            width   : $( this ).outerWidth(),
            height  : $( this ).outerHeight()
        };

        window.nodes.node[ $( this ).attr( 'id' ) ].right = window.nodes.node[ $( this ).attr( 'id' ) ].left + window.nodes.node[ $( this ).attr( 'id' ) ].width;
        window.nodes.node[ $( this ).attr( 'id' ) ].bottom = window.nodes.node[ $( this ).attr( 'id' ) ].top + window.nodes.node[ $( this ).attr( 'id' ) ].height;
    });
}

次に、それらをオンロード記録します$( window ).load(function() { record_node_positions(); });

パズルの2番目のピースは検索機能です。クリックが発生して、クリック領域内のスペースを占めるすべての要素を検索するときに、これが必要になります。

function find_node_with_position( positionTop, positionLeft ) {

    var results = [];

    $.each( window.nodes.node, function( key, value ) {

        if ( positionTop >= window.nodes.node[ key ].top && positionTop <= window.nodes.node[ key ].bottom ) {
            if ( positionLeft >= window.nodes.node[ key ].left && positionLeft <= window.nodes.node[ key ].right ) {
            // This node fits into the search, return it

                results.push( window.nodes.node[ key ] );

            }
        }

    });

    if ( results.length < 1 )
        results = null;

    return results;
}

そして最後に、クリックが発生したら、結果から必要なものを選択するだけです。この場合は、返されたすべての要素の最後の要素です。

$(window).on('click', function(event_handle) {
    var objects_clicked = find_node_with_position( event_handle.pageY, event_handle.pageX );

    if ( objects_clicked != null ) {
        var object_clicked = objects_clicked[ objects_clicked.length-1 ].id
        console.log(object_clicked);
    }
});

これがお役に立てば幸いです。

于 2012-11-04T10:19:39.950 に答える