开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

e.offsetX，e.offsetY报告错误的号码

e.offsetX和e.offsetY是JavaScript中的事件对象属性，用于获取鼠标相对于事件源元素的水平和垂直偏移量。

概念：e.offsetX和e.offsetY是相对于事件源元素的左上角的坐标偏移量，单位为像素。
分类：它们属于鼠标事件对象属性。
优势：通过使用e.offsetX和e.offsetY，可以方便地获取鼠标在事件源元素内的具体位置，用于实现一些与鼠标位置相关的交互效果。
应用场景：常用于前端开发中的鼠标事件处理、拖拽、画图等场景。
推荐的腾讯云相关产品：由于e.offsetX和e.offsetY是JavaScript语言的内置属性，与云计算无直接关系，因此无需特定的腾讯云产品推荐。

更多关于e.offsetX和e.offsetY的详细信息，可以参考以下链接：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

canvas实现在线签名

<canvas id="canvasbox" width="500" height="250" style="border:1px solid green; margin:20px auto;display:block;"></canvas> <div class="btn" style="margin:0 auto; text-align:center;

06

解锁前端难题：亲手实现一个图片标注工具

业务中涉及图片的制作和审核功能，审核人员需要在图片中进行标注，并说明存在的问题，标注过程中需要支持放大缩小，移动等交互，将业务剥离，这个需求，可以定义为实现一个图片标注功能。

01

h5逐步实现＜＜canvas系统＞＞

第三：让canvas绘图可以画整个body.并且要设置线条的宽度+线条结束时候的形状+两天线条相交时的形状.+线条的颜色.

03

手把手教你利用JS给图片打马赛克

不过，元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务

02

Float Panel

基础引入方案（通用）新建 [Blogroot]\themes\butterfly\source\js\floatpanel.js, var ANGLE = 45; //控制浮动角度，数值越大，浮动幅度越大。 var panel= document.getElementsByClassName('wowpanels'); for(var i = 0;i<panel.length;i++){ floatable(panel[i]); } function floatable (content) {

03

canvas 系列学习笔记三实战例子《图片上画标注》

imgae 是一个底图，上面是canvans 操作画图，底部层级可以是标签或者canvans 加载都可以。因为练习，所以选用canvans。

02

几十行代码搞定兔年刮刮乐

刮刮乐大家都知道，无论是实体票子的刮奖还是虚拟活动的电子刮奖基本都使用这种方式。我们先来做下刮刮乐的设计。

03

vue使用canvas签名之PC端

在一些项目业务中，经常会使用到画板，让用户自己去写/画一些东西做标示，比如说在线签电子合约、签名等，如果不用插件，那么如何使用h5的canvas画布来实现这一需求呢？【本篇只讨论PC端，移动端期待下篇】

01

EonerCMS——做一个仿桌面系统的CMS（四）

一晃又过去一个多星期了，途中出了个差，进度上略有耽误，不过还好，上次有个话题没说完，这次继续，就是窗口拖动以及改变窗口尺寸。

02

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.

04

一张图片或Div不同位置点击事件

代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

02

原生JS实现鼠标滑动撒爱心特效

给大家分享一个鼠标滑动撒爱心的特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta cha

03

Peer Stream 源码备份

上一篇备份了其余的9个文件，这一篇备份一下最后一个peer-stream.js这个600+行，20KB的主要前端文件。

06

JS高级拖动技术 setCapture，releaseCapture

<script type=”text/javascript”> <!– window.οnlοad=function(){ objDiv = document.getElementById(‘drag’); drag(objDiv); }; function drag(dv){ dv.οnmοusedοwn=function(e){ var d=document; e = e || window.event; var x= e.layerX || e.offsetX; var y= e.layerY || e.offsetY; //设置捕获范围 if(dv.setCapture){ dv.setCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } d.οnmοusemοve=function(e){ e= e || window.event; if(!e.pageX)e.pageX=e.clientX; if(!e.pageY)e.pageY=e.clientY; var tx=e.pageX-x; var ty=e.pageY-y; dv.style.left=tx; dv.style.top=ty; }; d.οnmοuseup=function(){ //取消捕获范围 if(dv.releaseCapture){ dv.releaseCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } //清除事件 d.οnmοusemοve=null; d.οnmοuseup=null; }; }; } //–> </script>

setCapture 的意思就是设置一个对象的方法被触发的范围，或者作用域。如果不设置，则div只在当前窗口内被触发。如果设置，则在整个浏览器范围内被触发，也就是可以拖到浏览器外面

01

vue 中基于html5 drag drap的拖放

开始的我，so easy！通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！

00

【canvas】30行代码教你画一个刮刮乐

粥六快乐！！ 💌 摸鱼时间，点进了充满童年回忆的4399，页面还是那个味道一点也没变。突发奇想，要不尝试做个4399小游戏玩玩？太复杂的也费事，就整个简单的刮刮乐吧。 ✔开整~ 分析 🎨 刮刮乐游戏肯定需要两张图片，通过鼠标的移动控制图片的绘制路径 🕐步骤1 准备1个canvas容器： <canvas width="800px" height="600px"></canvas> 🕑 步骤2 注册图片 const one = new Image() one.src = './1

02

Canvas跟随鼠标炫彩小球

通过创建函数收纳小球所有的样式，再通过实例化函数，将鼠标当前的位置传递给Ball函数，让通过实例化创建出来的小球，最后将创建出来的小球存入数组中，数组中以对象形式存放着每个小球的属性和属性值

04

简单拖拽实现

拖拽的元素必须绝对定位。在实际操作中，犯了一个简单的错误：　　对于iframe元素的事件绑定，需要在src完全加载后进行绑定。 iframe.onload = function(){ iframe.contentDocument.onclick = function(){} ... } 另外，目前版本对于iframe的拖动有bug，不过可以通过在div中嵌套iframe来实现兼容。 1 var Drag = function(el,minX,maxX,minY,max

04

利用canvas的getImageData()方法制作《在线取色器》

1，取色器，首先就要有取色的对象，所以第一步我们需要制作前端的图片预览，我才用的方法是createObjectURL()获取图片的路径

02

手写原生代码专题 | 简易手写画板（二）

如视频所示，在这个示例中，我们用到了画布 canvas 相关的知识，比如创建画布、画圆形、画直线的基础知识，有了这些基础后，我们就能轻松完成本示例，示例效果如下视频所示。

02

拖拽牛逼，轻松实现一个自由拖拽的组件

大家好，在前两篇文章中，我们走进了前端低代码的世界，并揭秘了低代码的核心——页面设计器的实现。在揭秘页面设计器时，我们重点分享了顺序排列布局的组件拖动方式，那篇文章[2]的评论中，有小伙伴问到自由布局的实现，那么我们在这篇文章中来分享一下自由布局拖动的实现原理，实现一个设计器组件自由拖动的最简demo。

03

低代码设计器的自由布局拖动的实现原理

大家好，我们在这篇文章中来分享一下自由布局拖动的实现原理，实现一个设计器组件自由拖动的最简demo。

03

如何在silverlihgt中使用右键

一般我们在silverlight中点击右键会出现如下的对话筐. 在flash中其提供了一个可定制话的右键菜单系统.(ContextMenu) 这个在silverlight中也是一样可以做到的.

07

第53天：鼠标事件、event事件对象

-->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件（keyCode） -->拖拽效果

02

图形工具的另一种以光标为中心缩放实现

应该是他要给项目做缩放功能，然后看到了我图形编辑器缩放的文章，想要跟着我文章的思路移植到他的项目上。

03

【说站】vue实现tab切换的放大镜效果

本文实例为大家分享了vue实现tab切换的放大镜效果的具体代码，供大家参考，具体内容如下

03

2021-10-17 JS使模板元素进行移动（拖拽模板元素）

原理很简单，就是将元素设置为绝对定位，然后监听鼠标按下（mousedown），移动事件(mousemove)，改变元素的top、left值就行。

02

Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)

本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale，并结合这两个方法，实现鼠标滚轮缩放以及画布拖动功能。

01

利用peerjs轻松玩转webrtc

随着5G技术的推广，可以预见在不久的将来网速将得到极大提升，实时音视频互动这类对网络传输质量要求较高的应用将是最直接的受益者。而且伴随着webrtc技术的成熟，该领域可能将成为下一个技术热点，但是传统的webrtc应用开发存在一定的复杂性，本文将介绍如何利用peerjs这一开源框架来简化webrtc开发。

03

Canvas之鼠标滑动特效

我们会看到很多网页的粒子特效；如上图所示，这些都是借助HTML新特性，使用新增标签Canvas得到的效果；那么我们来了解下canvas。

01

【H5游戏实例】JS+canvas实现人机大战之五子棋

html代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <canvas id="chess" width="450px" height="450px"><

08

《最新出炉》系列初窥篇-Python+Playwright自动化测试-65 - Canvas元素推拽-番外篇

上一篇宏哥想了好多办法都没有演示成功的拖拽Canvas元素，宏哥也说的太绝对了，给大家造成困惑或者误导。一连好几天吃饭睡觉都不怎么香了，脑子中始终对这件事耿耿于怀，自己问自己难道就真的没有办法了吗？突然想到了一种办法抱着试一下的心态，结果出乎意料但是又在情理之中：成功推拽了！！！此刻地心情无以言表，直接来睡一篇Canvas元素拖拽的番外篇来分享一下宏哥的喜悦心情。好了言归正传下边进入今天的主题。

04

基于H5的音乐播放器开发（1）（前端篇）

这是我个人练习的小项目。基于koa2-iview+less定制。用于个人对播放器的复习。现已集成于个人网站上了。

03

ASP.NET AJAX(12)__浏览器兼容功能判断浏览器的类型和版本Sys.Browser针对DOM元素的兼容操作针对DOM事件的兼容操作

目前，常见的浏览器IE（6，8，9），chrome，firefox，safari等，还有国内的一些曾经靠恐吓用户来提高使用率的某浏览器（河蟹社会），这些浏览器对于Javascript的语言特性实现大致是相同的，但是对于DOM操作方式却大相径庭，所以我们通常需要自己对不同浏览器对于DOM的操作方式进行分而治之，或者我们往往是使用一些Javascript框架提供的兼容功能，当然也有我们的Microsoft AJAX Library 判断浏览器的类型和版本浏览器兼容层的优势在于，我们可以使用同样的编码方式，让相

09

我希望按照我的思路尽可能将canvas基础讲明白

写在前面 canvas很多人写过，我之前的博客里面也写过关于canvas的教程，但是后面我觉得其实不太好，因为很多东西都是很模糊的，没有非常直观清晰的将canvas讲解明白，究其原因，还是这个属性使用的不够多，导致很多属性不够熟练，但是我希望这篇文章可以将这个属性彻底的讲明白，毕竟只是一个标签而已，怎么讲都不会太复杂，他之所以不太好学原因就在于他自带的方法太多，加上很多的效果都是需要方法之间的相互配合使用，所以难度和复杂度就直接升高了很多，它不像html的其他标签一样，比如p、span等都只是自带了一些样

03

鼠标捕获(setCapture，releaseCapture)的学习

鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象——对指定的对象设置鼠标捕获。这个对象会为当前应用程序或整个系统接收所有鼠标事件。

03

Canvas实现网页协同画板

画板协同：简单来说就是使用canvas开发一个可以多人共享的画板，都可以在上面作画画板，并且画面同步显示 canvas白板相关使用参考我之前的文章：Canvas网页涂鸦板再次增强版

02

按照我的思路尽可能将canvas基础讲明白

写在前面 canvas很多人写过，我之前的博客里面也写过关于canvas的教程，但是后面我觉得其实不太好，因为很多东西都是很模糊的，没有非常直观清晰的将canvas讲解明白，究其原因，还是这个属性使用的不够多，导致很多属性不够熟练，但是我希望这篇文章可以将这个属性彻底的讲明白，毕竟只是一个标签而已，怎么讲都不会太复杂，他之所以不太好学原因就在于他自带的方法太多，加上很多的效果都是需要方法之间的相互配合使用，所以难度和复杂度就直接升高了很多，它不像html的其他标签一样，比如p、span等都只是自带了一些

02

《最新出炉》系列初窥篇-Python+Playwright自动化测试-64 - Canvas和SVG元素推拽

今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。

02

View的滑动方式详细介绍

用于追踪手指滑动速度的。例如相册的图片，手指快速左右滑动会切换图片，慢则不会切换。获取速度前，要先调用computeCurrentVelocity计算速度，如下代码。效果是手指滑的快时，就会弹Toast。

00

一分钟自己搭建一个AI五子棋

演示网址： http://timi.iu00.cn/wzq/ 效果图： 📷 代码：直接随意粘贴到一个.html文件中即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block;

01

图解浏览器的各种距离

事件对象可以拿到 pageY、clientY、offsetY，分别代表到点击的位置到文档顶部，到可视区域顶部，到触发事件的元素顶部的距离。

01

【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置 JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 )

创建 JFrame 窗口后 , 通过调用 JFrame#setDefaultCloseOperation 可以设置窗口自动关闭 ;

02

HTML5 Canvas开发详解（实战一）

针对 HTML5 Canvas开发详解（基础一）的基础知识，写了一些实战案例，本节的案例代码是写在vue搭建的项目中的，引用了element-ui的按钮组件，如果大家要运行本节代码，以组件的形式引到自有vue项目的某个父组件即可。

02

Flash/Flex学习笔记(30)：不用startDrag和stopDrag的对象拖动

对于从Sprite类继承来的对象，要实现拖放当然是Flash/Flex学习笔记(13)：对象拖动(startDrag/stopDrag) 里讲的方法最方便，但是对于不是从Sprite类继承得来的对象，这startDrag/stopDrag是不能用的，这时候只能采用最通常用做法：利用Mouse_Down,Mouse_UP,Mouse_Move事件来处理注意：对象的Mouse_Move事件，只有当鼠标在对象上时才能被监听，如果用户鼠标移动过快，超出了对象的范围，该事件就不起作用了，所以监听Mouse_Move

layerX/layerY与offsetX/offsetY区别

layerX/layerY与offsetX/offsetY获取事件源于鼠标作用的位置信息

05

【Android】在任意位置弹出PopupWindow

前言在日常的开发中，经常会有弹框的操作。实现弹框有两种选，PopupWindow或者Dialog，这里就先忽略Dialog。弹框可能会在各种位置出现，在指定View的上、下、左、右、左对齐、右对齐等... 而PopupWindow似乎就提供了showAsDropDown方法（请忽略showAtLocation，这边说的是相对于View显示），这~~就有点尴尬了。 PopupWindow 平时我们可能是这样用PopupWindow的：创建一个布局，再创建一个类继承PopupWindow public

使用ZXing生成二维码，可设置中间icon，边缘白色宽度为0

import android.graphics.Bitmap; import android.graphics.Matrix; import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import com.google.zxing.WriterException; import com.google.zxing.common.BitMatrix; import com.google.zxing.qrcod

06

js实现简易拖拽

scrollWidth：对象的实际内容的宽度，不包括边线宽度 clientWidth：对象内容的可视区的宽度，不包括边线宽度 offsetWidth：对象整体的实际宽度，包括滚动条等边线

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭