javascript - 浏览器缩放级别改变测量的像素位置与 MouseEvent.clientX 报告

标签 javascript html browser

我正在尝试获取 Chrome 中点击事件的坐标。该事件是使用 ReactComponent 的 onClick 处理程序生成的,如下所示:

<img
    onClick={(e) => { console.log('e:', e.clientX, window.scrollX, "pageX", e.pageX);}}
</img>

enter image description here

结果值:

enter image description here

显然与尺子测量的值不符。当我尝试在点击位置添加一个 div 时,这也会表现出来。它没有出现在正确的位置,而是出现在偏移处。

有人遇到过类似的情况吗?

最佳答案

浏览器窗口已放大。Cmd - [减号] 修复了事件相对于标尺的位置。 div 定位与此处描述的问题相关:

Position fixed not working is working like absolute

关于javascript - 浏览器缩放级别改变测量的像素位置与 MouseEvent.clientX 报告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41193557/

相关文章:

javascript - Web 组件中的触发事件

javascript - 如何将 Javascript 映射转换为对象?

javascript - 为什么在可用性检查后,MacOS/iOS 设备中的 localStorage 有时会为空?

browser - 如何根据支持的列表检查当前浏览器

javascript - 如何将应用程序实例传递给 ExpressJs 中的路由文件?

html - RegEx 仅当字符串出现在特定 HTML 元素内时才匹配字符串

javascript - 如何制作一个改变值和文本的按钮

html - 我需要更新 CSS 才能上传新图片吗?

jquery - 如果 .slideDown 超出浏览器底部,如何自动向上滚动页面?

javascript - 如何在纯 JavaScript 的帮助下对表格进行排序和重新生成