jQuery：如何獲取鼠標相對於元素的頂部/左側角落的位置考慮到滾動條

我正在做一些與canvas元素的工作，並且需要跟蹤突出顯示其部分的鼠標。jQuery：如何獲取鼠標相對於元素的頂部/左側角落的位置考慮到滾動條

我希望能夠獲得相對於元素的位置左上角，0，0。我有這樣的 - 使用jQuery：

... 
var pos = $(this).position(); 
var left = e.clientX - position.left; 
var top = e.clientY - position.top;  
...

首先是有一個jQuery的API，它會做上述對於我來說，其次，當窗口向上/向下滾動時，由於畫布比實際的瀏覽器窗口大很多，所以它失敗了，所以有一個API也考慮到了這一點。

TIA。

來源

2011-09-22 push 22

嘗試'offset'？ –

嘗試偏移 - 似乎沒有工作，我需要使用元素的頂部/左側作爲原點。偏移似乎給我一個左滾動左側和一個奇怪的頂部 - -1 -2等左邊。 –

你應該取決於瀏覽器，使用Event Object的offsetX/offsetY或layerX/layerY屬性鼠標相對於您所綁定的mousemove事件的目標元素的軌道。

我製作了這個小插件，對上述值進行規範化處理，並將mouseX和mouseY添加到事件對象中。

(function($){ 
    var org = $.event, 
     _super = { 
      fix: org.fix 
     }; 
    $.extend($.event, { 
     fix: function(event) { 
      var self = _super.fix.apply(this, [event]); 
      // Normalize offsetY/X and layerX/Y 
      self.mouseX = (self.offsetX || self.layerX); 
      self.mouseY = (self.offsetY || self.layerY); 
      return self; 
     } 
    }); 
})(jQuery);

見test case on jsFiddle

來源

2011-09-22 17:40:03 mekwall

似乎不工作在我的瀏覽器 - firefox 6 - 我只是得到消息「左：undefined頂部：undefined 」。根據你給出的鏈接，沒有屬性稱爲那個。 –

@ push22啊...似乎Firefox爲此使用'layerX'和'layerY'。更新測試用例！ – mekwall

適用於X /左側，但對於頂級調查總是錯誤的。謝謝。 –

設法還挺修復它，成爲時尚後：

var left = 0; 
    var top = 0; 
    if(e.offsetX) { 
    left = e.offsetX; 
    top = e.offsetY; 
    } else { 
    var offset = $(element).offset(); 
    left = e.layerX - offset.left; 
    top = e.layerY - offset.top; 
    }

MOZ所需要的偏移量考慮在內。雖然我確定必須有一個「正確」的jquery api來隱藏我的這些細節。

也有一些「有趣」與jsfiddle進行上述示例工作正常 - 它沒有在瀏覽器中。

當然，我可能會說廢話。

來源

2011-09-23 12:39:15

jQuery：如何獲取鼠標相對於元素的頂部/左側角落的位置考慮到滾動條

回答

相關問題