使用 css zoom 属性时鼠标坐标错误

Question

当我使用 css 缩放属性时，鼠标坐标在除以下两个元素外的所有元素上都是正确的：http://seiyria.com/bootstrap-slider/ & https://fullcalendar.io

我们如何解决这个问题？预先感谢您的帮助。

Answer 1

对于fullcalendar.io，我在Github上找到了解决办法，需要编辑文件fullcalendar.js的两个函数：

function getEvX(ev) {
    if (ev.pageX !== undefined) {
        return ev.pageX / Number($('body').css('zoom'));
    }
    var touches = ev.originalEvent.touches;
    if (touches) {
        return touches[0].pageX / Number($('body').css('zoom'));
    }
}


function getEvY(ev) {
    if (ev.pageY !== undefined) {
        return ev.pageY / Number($('body').css('zoom'));
    }
    var touches = ev.originalEvent.touches;
    if (touches) {
        return touches[0].pageY / Number($('body').css('zoom'));
    }
}

对于 bootstrap 滑块，解决方案如下：

var valeurZoom =  window.getComputedStyle(document.body, null).getPropertyValue('zoom');

if (valeurZoom !== "" && valeurZoom !== 1) { 
    eventPosition = eventPosition / valeurZoom;
}

希望对其他人有帮助！

使用 css zoom 属性时鼠标坐标错误

Wrong mouse coordinates when using css zoom property

css

calendar

slider

zooming

使用 css zoom 属性 时鼠标坐标错误

Wrong mouse coordinates when using css zoom property

css

calendar

slider

zooming

使用 css zoom 属性时鼠标坐标错误