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

当我单击类按钮 1 时，不会出现警报。我试图改变但仍然没有，我尝试了这段代码：

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

您的问题是客户端除了 on 之外没有看到任何其他点击，$('.follow')因为它始终是 ACTUAL 鼠标光标下的那个 - 其他所有内容都被忽略，因为事件看起来不比.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;
    });
}

然后onload记录它们$( window ).load(function() { record_node_positions(); });

拼图的第二部分是查找功能，当您点击时，您将需要它来查找点击区域内占据空间的所有元素。

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 回答