Question

我有点问题，我不知道如何处理它。我有自定义鼠标，我用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可能存在问题吗？

Answer 1

你的问题是客户端看不到$('.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(); });

拼图的第二部分是find函数，当点击发现所有元素占据点击区域内的占用空间时，你需要这个。

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

希望这很有用。

jquery mousemove和点击处理程序，不工作点击另一个div

1 个答案: