滚动弄乱了我的画布鼠标坐标 - Javascript Telerik Mobile

Question

在画布上获取鼠标坐标总是有效的，除非我必须滚动然后它出错了。 y 在画布上时可能最终为负数。这是我的代码：

创建画布的代码块：

var width = (document.getElementById('assessmentSectionForm' + platform).clientWidth);
        var height = Math.round(theSection.thePicture.ySize * (width / theSection.thePicture.xSize))
        var canvas = buildCanvas(Math.round(width), height, false, true);
        //var canvas = document.getElementById('assessmentImage');
        var ctx = canvas.getContext("2d");
        _context = ctx;
        _canvas = canvas;
        canvas.addEventListener("mousedown", relMouseCoords, false);

获取坐标的函数：

function relMouseCoords(event) {
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var sect = _currentSection;
    var currentElement = this;

    do {
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    } while (currentElement = currentElement.offsetParent)

    if (event.pageX || event.pageY) { 
        canvasX = event.pageX - totalOffsetX;
        canvasY = event.pageY - totalOffsetY;
    }

    //alert( 'x: ' + canvasX + '         y: ' + canvasY);
    for (var x = 0; x < _currentSection.allHotSpots.length; x++) {
        if (_currentSection.allHotSpots[x].myPicZoom === _currentPicZoomCode) {
            scaleTheHotSpot(_currentSection.allHotSpots[x], _currentSection.thePicture);
        }
    }

    for (var i = 0; i < _currentSection.allHotSpots.length; i++) {
        if (canvasX > _currentSection.allHotSpots[i].topLeft[0] &&
            canvasX < _currentSection.allHotSpots[i].bottomRight[0] &&
            canvasY > _currentSection.allHotSpots[i].topLeft[1] &&
            canvasY < _currentSection.allHotSpots[i].bottomRight[1] &&
            _currentSection.allHotSpots[i].myPicZoom === _currentPicZoomCode) {...

relMouseCoords 的其余部分无关紧要，因为鼠标坐标在我到达切断它的位置之前应该是正确的。为什么这段代码不考虑滚动？看起来应该。我从This stack overflow answer. 得到它值得一提的是，我正在构建一个 Telerik Mobile 应用程序，但是我发现大部分时间的 javascript 工作方式与在网页中的工作方式相同。如果此代码中的错误没有明显的原因，我最好在 Telerik 论坛上询问。

Answer 1

您可以使用event.layerX 而不是event.pageX，它返回事件发生的元素的坐标值。这样您就不必担心偏移量以及窗口可能发生的任何其他事情。

请注意，不建议将 pageX/Y 和 layerX/Y 都用于生产，因为目前没有人知道它们会发生什么。

https://developer.mozilla.org/en-US/docs/Web/API/UIEvent.layerX

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.addEventListener('mousedown', function(e) {
  alert("X: " + e.layerX + ' Y: ' + e.layerY);
  })

canvas {
  border: 1px solid;
  }