Question

我在google chrome中使用canvas元素遇到了一些麻烦。

我有一个带有多个矩形的画布。我跟踪名为targets的数组中的矩形。每次鼠标在画布上移动时，我都会调用悬停功能来检查鼠标是否位于其中一个矩形的顶部。

如果它位于矩形的顶部，则矩形应填充纯色。

看看这个javascript行：

function hover() {
    var location = Sys.UI.DomElement.getLocation(canvasElement);

    // loop through all rectangles in the targets array and caluclate if the mouse is on top op any of these rectangles.
}

这在IE和Firefox中运行良好。

但是在谷歌浏览器中，当我将鼠标悬停在矩形上方与矩形相同的区域时，矩形会被填充。

因为它总是与矩形的实际位置相同的距离，所以我很快发现 Sys.UI.DomElement getLocation 方法在Google Chrome中返回不同的值。

结果如下：

Firefox：

var location = Sys.UI.DomElement.getLocation(canvasElement);

location.x = 545
location.y = 297

Chome：

var location = Sys.UI.DomElement.getLocation(canvasElement);

location.x = 544
location.y = 94

因此水平方向上有1个像素，垂直方向上有200个像素以上。

现在我知道当我悬停在矩形上方的区域时，我的矩形是如何填充的。

但当然我想知道我应该做些什么来避免谷歌浏览器的这种行为。

你有什么想法吗？

非常感谢任何帮助。

谢谢！

更多信息：

MSDN：link

Sys.UI.DomElement getLocation Method

获取DOM元素相对于左上角的绝对位置   所有者框架或窗口的一角。

Answer 1

使用JQuery找到另一个解决方案：

var location = $（canvasElement）.offset（）;

然后只使用location.left和location.top

Sys.UI.DomElment.getLocation在Google Chrome中返回的值与其他浏览器中的值不同

1 个答案: