鼠標座標無法正常工作，

在下一頁我有一個應該在圖像旁邊顯示的彈出窗口，具體取決於彈出窗口顯示的更大/更接近鼠標的窗口大小。我不明白代碼有什麼問題，這使得彈出窗口不會顯示在與鼠標相同的位置？鼠標座標無法正常工作，

http://www.hughgrice.com/test/

jQuery(document).mousemove(function (e) { 

    mouseX = e.pageX; 
    mouseY = e.pageY; 

    follow(); 
}); 

function follow(){ 
    d = document.getElementById("thumbTT"); 
    if(openToolTip){ 
     d.style.display = "block"; 
     d.style.left = mouseX+5 + "px"; 
     d.style.top = mouseY-100 + "px"; 
    }else{ 
     d.style.display = "none"; 
    } 
}

http://www.hughgrice.com/test/

來源

2012-03-05 Burt

那麼，什麼是你的問題？ – ShankarSangoli 2012-03-05 13:40:48

JavaScript具有詞彙範圍界定，而不是動態範圍界定。你必須將值作爲參數傳遞給函數調用... – 2012-03-05 13:40:48

感謝您的有用評論Sime，你認爲這是什麼原因造成的問題？ – Burt 2012-03-05 13:45:21

這應該工作：

var $elem = $('#thumbTT'); 

$(document).on('mousemove', function (e) { 
    follow(e.pageX, e.pageY); 
}); 

function follow (x, y) {   
    if(openToolTip) { 
     $elem.css({ left: x + 5, top: y - 100 }).show(); 
    } else { 
     $elem.hide(); 
    } 
}

我假設#thumbTT元素是靜態的，所以我事先緩存引用。

來源

2012-03-05 13:44:34

由於您的wrapper DIV是相對定位，所以它沒有正確定位。要麼你必須從你的包裝DIV刪除position:relative，或者你必須寫mousemove function像

jQuery(document).mousemove(function (e) { 
    var offset = jQuery(this).css('offset'); 

      mouseX = offset.left; 
      mouseY = offset.top; 
      follow(); 
     });

也許您需要調整您的代碼

來源

2012-03-05 14:06:54 user160820

鼠標座標無法正常工作，

回答

相關問題