Question

我正在使用canvas元素做一些工作，需要跟踪鼠标周围突出显示部分。

我希望能够获得相对于左上角元素0,0的位置。我有这个 - 使用jQuery：

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

首先是有一个jQuery api会为我做上面的事情，其次当窗口被向上/向下滚动时它会失败，因为画布比实际的浏览器窗口大很多，所以有一个api接受它也考虑到了。

TIA。

Answer 1

根据浏览器的不同，您应该使用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

Answer 2

在时尚之后成功地解决了这个问题：

   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还有一些“搞笑”，上面的例子工作正常 - 它不在浏览器中。

当然，我可能只是胡说八道。

jQuery：如何在考虑滚动条的情况下获取鼠标相对于元素顶部/左角的位置

2 个答案: