Question

I ahve a little problem and I don’t know how to handle it. I have custom mouse and I have made it with jQuery mousemove function(follow is cursor image):

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

html code looks like this:

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

And I have made a custom image when mouse clicks somewhere:

$('.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});
        });
});

in this click code, for 0.2 seconds is showing another image and returns to normal state. And here comes problem when I am trying to create another click function:

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

When I click on class button1, alert doesn’t appear. I tried to change to but still nothing, I tried and this code:

        $('.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');
            });
        });

,but still nothing. I tried a lot of moves, but nothing helped for me. Maybe you know where problem could be?

If I remove $('.mainBody').click(...); handler, $('.button1').click(...) still don’t working, so maybe there is problem with mousemove?

Answer 1

Your problem is that the client doesn’t see any other click apart from the one on $('.follow') because it is always the one under the ACTUAL mouse cursor – everything else is ignored, because the event doesn’t look deeper than .follow. I wouldn’t suggest you change the cursor in such a way. Use css cursor settings and this issue will go away.

EDIT:

So you could handle click events in a bit different way if you 100% have to use these huge cursors. First record every position in your dom tree for every element that you might need to listen for clicks on:

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

Then onload record them $( window ).load(function() { record_node_positions(); });

Second piece to the puzzle is the find function, you’ll need this when a click happens to find all elements the occupy space within the click region.

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

And finally, once a click happens, just pick what you need from the results, in this case it’s the last element from all the returned ones

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

Hope this is useful.