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

发布于 2024-12-06 09:38:33 字数 344 浏览 0 评论 0 原文

我正在使用画布元素进行一些工作，并且需要在其突出显示部分周围跟踪鼠标。

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

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

首先有一个 jQuery api 可以为我执行上述操作，其次当窗口向上/向下滚动时它会严重失败，因为画布比实际的浏览器窗口大得多，所以有一个api 也考虑到了这一点。

TIA。

原文

I'm doing some work with the canvas element and need to track the mouse around highlighting parts of it.

I would like to be able get the position relative to the elements top left, 0 , 0.
I have this - using jQuery:

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

First is there an jQuery api that will do the above for me and secondly it fails miserably when the window has been scrolled up/down as the canvas is a lot bigger than the actual browser window so is there an api that takes that into account also.

TIA.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

メ斷腸人バ 2024-12-13 09:38:34

您应该根据浏览器使用 offsetX/offsetY 或 layerX/layerY 属性="http://api.jquery.com/category/events/event-object/" rel="nofollow">事件对象用于跟踪相对于您已绑定 的元素的鼠标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);

请参阅 jsFiddle 上的测试用例

You should, depending on the browser, use offsetX/offsetY or layerX/layerY attributes of the Event Object to track the mouse relative to the element which you've bound the mousemove event to.

I made this small plugin which normalizes the above values and adds mouseX and mouseY to the Event Object.

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

See test case on jsFiddle

回复收藏 0 原文

鱼忆七猫命九 2024-12-13 09:38:34

设法修复它，以某种方式：

   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 上还发生了一些“有趣”的事情，但在浏览器中却无法正常工作。

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

managed to kinda fix it, after a fashion:

   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 needs the offset taken into account. Although i'm sure there must be a "proper" jquery api that hides this detail from me.

Also There's something "funny" going on with jsfiddle that the above example works ok - it didn't in a browser.

Of course I may just be speaking nonsense.

回复收藏 0 原文

~没有更多了~