Warm tip: This article is reproduced from serverfault.com, please click
firefox html javascript events html5-canvas

javascript-Firefox中的event.offsetX

(javascript - event.offsetX in Firefox)

发布于 2012-07-04 19:20:51 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript">
function main(){
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousemove", function(e){
        if (!e) e = window.event;
        var ctx = canvas.getContext("2d");

        var x = e.offsetX;
        var y = e.offsetY;

        ctx.fillRect(x, y, 1, 1);
    });
}
</script>
</head>
<body onload="main();">
<div style="width: 800px; height: 600px; -webkit-transform: scale(0.75,0.75); -moz-transform: scale(0.75,0.75)">
    <canvas id="canvas" width="400px" height="400px" style="background-color: #cccccc;"></canvas>
</div>
</body>
</html>

请考虑上述快速而肮脏的示例。请注意，我的画布包含在已应用缩放转换的div中。上面的代码可在任何基于Webkit的浏览器上完美运行。移动鼠标时，它将在画布上绘制点。不幸的是，它不在Firefox中，因为其事件模型不支持offsetX / Y属性。如何将（可能是）event.clientX（在firefox中也受支持）的鼠标坐标转换为考虑画布位置，转换等的画布相对坐标？谢谢，卢卡。

Questioner
lviggiani
Viewed
0
分享
3,565 2019-01-11 04:31:25

尝试layerX，layerY

var x = (e.offsetX === undefined) ? e.layerX : e.offsetX;
var y = (e.offsetY === undefined) ? e.layerY : e.offsetY;

小提琴

Ivan Kochurkin 2012-12-03 14:35:01

不幸的是，Firefox的layerX和layerY属性与其他浏览器不同。页面有相对的左上角，但没有elemenet。

Ivan Castellanos 2013-05-23 09:40:46

false，它们相对于包括元素本身的最接近的offsetParent，只需在要用于坐标的元素上添加“ position：relative”即可。

Palani 2014-02-07 10:58:54

不适用于我，但这可以正常工作stackoverflow.com/questions/12704686/…

cristiano2lopes 2014-10-09 15:43:48

不适用于FF 32.0.3。事件中缺少layerX和layerY。

Adrian Maire 2014-10-27 13:42:58

layerX和offsetX不相同，如果目标是内联元素，则offset给出光标在元素中的位置，但返回相对于其非内联父容器的layerX。

热门帖子

1
浙江 ISP 会屏蔽 Wireguard UDP 端口
2
vercel 免费版 3 个指标都超了，好像我的网站已经获得了基础流量。还好套了 cloudflare 不然流量也超了。
3
最近换了真我手机，发现这系统连应用的数据都无法备份
4
MacBook Pro 决赛圈
5
杭州岗位太少了
6
求推荐硬路由（1000 内）
7
DevOps Engineer-兼职远程-每日工作量 3-4 个小时-薪资可议
8
有没有新加坡地区的 vps 推荐？
9
使用了这么多年水果机，才发现竟然不能指定某日设置闹钟
10
求推荐一款无风扇能上机架的万兆电口交换机

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information (翻译：论文实现——YOLOv9: Learning What You Want to Learn using Programmable Gradient Information（利用可编程梯度信息学习您想学的内容）)
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections. (翻译：使用 HWID / KMS38 / Online KMS 激活方法激活 Microsoft 产品的脚本集合，重点是开源代码、较少的防病毒检测和用户友好性。)
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models. (翻译：启动并运行 Llama 2、Mistral、Gemma 和其他大型语言模型。)
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc. (翻译：多功能应用程序可查找重复项、空文件夹、相似图像等。)
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard) (翻译：Xray面板支持多协议多用户到期日&流量&IP限制（Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System (翻译：Jellyfin 是一个免费软件媒体系统，可让您控制管理和流式传输您的媒体。它是专有 Emby 和 Plex 的替代方案，通过多个应用程序从专用服务器向最终用户设备提供媒体。)
8
lightweight, standalone C++ inference engine for Google's Gemma models. (翻译：适用于 Google Gemma 模型的轻量级独立 C++ 推理引擎。)
9
📚 Freely available programming books (翻译：📚 免费提供的编程书籍)
10
A collective list of free APIs (翻译：免费 API 的集合列表)
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java (翻译：十亿行挑战 —— 使用 Java 对文本文件中的 10 亿行数据进行聚合的有趣探索)
12
🎓 Path to a free self-taught education in Computer Science! (翻译：🎓计算机科学免费自学教程！)
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA... (翻译：从零开始学习 Python 编程语言的课程，适合初学者)
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems (翻译：该存储库包含系统设计资源，在准备面试和学习分布式系统时非常有用)
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention. (翻译：Mamba 是一种新的状态空间模型架构，在信息密集型数据（例如语言建模）上显示出良好的性能，而之前的二次模型在 Transformers 方面存在不足。它基于结构化状态空间模型的进展，并本着FlashAttention的精神进行高效的硬件感知设计和实现。)