jquery mousemove和點擊處理程序，不工作點擊另一個div

Question

我是一個小問題，我不知道如何處理它。我有自定義的鼠標和我與jQuery的鼠標移動功能，使得它（遵循的是光標圖像）：

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

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

其次一塊拼圖是查找功能，你會當點擊發現找到所有元素佔據點擊區域內的空間時需要此項。

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

希望這是有用的最後一個元素。