js 获取鼠标位置的各种值

最新推荐文章于 2023-07-04 23:05:56 发布
最新推荐文章于 2023-07-04 23:05:56 发布
阅读量801 收藏 4
点赞数 1
分类专栏： 前端原生打底：JavaScript 文章标签： javascript firefox 前端 鼠标位置 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42618566/article/details/103966274
版权
  • clientX/Y：
    鼠标触发点相对浏览器可视区域的X、Y坐标。当然其中不包括工具栏和滚动栏。
    js 获取鼠标位置的各种值
  • screenX/Y：
    鼠标触发点相对于显示器的X、Y坐标
    js 获取鼠标位置的各种值
  • pageX/Y：
    鼠标触发点相对于当前整个网址页面的X、Y坐标
    js 获取鼠标位置的各种值
  • layerX/Y：
    鼠标触发点相对于被触发元素的左上角的距离。值和offsetX/Y是相同的。要求其元素的postion为retative或者absolute，否则返回相对html文档区域左上角距离
    js 获取鼠标位置的各种值
  • offsetX/Y：
    鼠标触发点相对于被触发元素的左上角的距离。一般左上角基准点不包括边框，在边框上会返回负值。
    js 获取鼠标位置的各种值
    js 获取元素在页面种的位置
美酒没故事°
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js获取鼠标点击位置
08-07
js获取鼠标点击位置 js获取鼠标点击的位置常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置，但仅使用这个方法是不够的，因为 event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的，而不考虑页面的滚动条所滚动的距离。
鼠标移动位置数值的实时显示
09-19
在鼠标的右下角呈现此刻鼠标移动的位置，并以坐标形式呈现
JavaScript中几种获取鼠标点击坐标位置的方法
qq_27278957的博客
10-26 9421
JavaScript中几种获取鼠标点击坐标位置的方法
JS实现网页上通过鼠标移动批量选择元素
02-03 1621
鼠标移动，将选择框的大小（height、width）设置为鼠标移动的距离（起始点和终点的差）鼠标按下，将选择框的位置（top、left）设置为点击位置，选择框初始宽高为0。鼠标抬起，停止选择框大小跟随鼠标移动，计算与选择框发生重叠的元素。（提示：重叠计算有多种方法，可自行替换其他方法）演示代码（可复制到HTML 文件中查看）
JavaScript获取鼠标位置的三种方法
weixin_30859423的博客
06-09 1080
在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果，这篇文章就鼠标点击位置坐标获取做一些简单的总结。 获取鼠标位置首先要了解什么是event，event是一个声明了全局变量的一个对象，在chrome和IE下，可以随意访问，对于好奇的朋友console.log一下event。但！！！Firefox下是没有e...
js 各种位置获取全解（包括元素属性、鼠标位置、滚动位置）
在下月亮有何贵干
01-14 1539
目录普通元素元素四周三级目录 普通元素 如果不了解盒子模型建议先阅读一下：css 盒子模型详解。 offsetLeft、offsetTop（左边与上边与设置了定位的父级的距离） offsetWidth、offsetHeight（可视宽高，内容区+padding+border+滚动轴宽度（如果存在）） clientLeft、clientTop （左、上边框宽度） clientWidth、clientHeight（内容区+padding，不包括border） scrollTop、scrollLeft（水平垂直
js常用的三个鼠标坐标获取方法
ljxyydx的博客
07-04 7122
鼠标坐标的三个获取方法
JS获取鼠标选中的节点信息
热门推荐
吴小迪的博客
05-02 4万+
今天给大家分享一下如何在项目中获取鼠标选中的节点和其他的信息 项目实战： 项目需求：在富文本编辑器上获取选中dom节点的内容，和鼠标所在的位置。 笔者前不久在某项目开发的过程中就遇到了这个问题，全网搜，感觉总结的好的还不是很多，就算是好的也不是很全，所以笔者决定把这些东西结合着我项目的需求去把这些知识点串起来，以供后面的朋友们解决问题。 首先要有一个输入框或者富文本编辑器（没有富文本编辑器朋友可以...
js 获取鼠标位置
huolan__34的博客
12-27 2357
在JavaScript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。 属性及其兼容性 属性 说明 兼容性 clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 ...
获取鼠标/标签在屏幕上的位置
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-22 1151
获取鼠标点击时在屏幕的位置 行内事件绑定 还可以代替事件委托 innerHTML+=有时候比创建添加元素更加方便
echart获取鼠标所在位置的x值以及y值
你可知外面的世界多大
07-04 9550
在echart图表中，经常需要获取当前鼠标所在点的值，一般情况下都会通过 let chartInstance = echart.init(dom); chartInstance.off('showTip');//这里是为了防止多次注册事件 chartInstance.on('showTip',function(param) { let nowDataIndex = param.dataInd...
获取鼠标位置的颜色值
12-13
一个基于VC环境下的程序源码，功能是快速获取鼠标所在位置的顔色值
JS获取鼠标选中的文字
10-21
下面是小编给大家分享的js获取鼠标选中的文字和js获取鼠标选中的值关键代码，大家如果有需要可以参考下
JS获取鼠标坐标位置实例分析
11-26
本文实例分析了JS获取鼠标坐标位置的方法。分享给大家供大家参考，具体如下： 取鼠标坐标位置有这些：鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,...
原生js实现跨浏览器获取鼠标按键的值
10-27
e.button W3C是获取鼠标按键 0 表示左键 1表示中键 2表示右键 而IE浏览器则是 1表示左键 4表示中间 2表示右键 这里的IE浏览器主要是IE8以下的浏览器，感兴趣的朋友可以参考下哈
Javascript 获取鼠标当前的位置实现方法
01-19
有时候，我们需要得到窗口拖动或者鼠标移动的距离，此时可以通过计算鼠标前后在页面中的位置来得到想要的结果，下面介绍几个事件属性: 1、客户区坐标位置 　鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置...
JavaScript 获取鼠标点击坐标五种方式及兼容性
司马懿的西山居
01-17 9308
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y:clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变兼容性：所有浏览器均支持pageX/Y:pageX/Y获取到的是触发点相对文档区域左
原生js获取鼠标位置 和 获取鼠标点击位置
前端小知识
07-27 5189
client获取的只是可视区域的X和Y坐标，如果页面有滚动条且滚动条滚动了，我们点击页面的同一位置，那么这个X和Y值是不会改变的，那么问题来了，怎么获取页面包括滚动条部分的X和Y坐标呢，这时候我们可以用page，page是获取这个页面的X和Y值，包括不可视区域!这也编写完成了就可以获取鼠标点击坐标和鼠标实时移动位置了~...
threejs 点击鼠标获取坐标位置
最新发布
08-09
在Three.js中要实现点击鼠标获取坐标位置的功能，可以通过以下步骤进行操作： 首先，需要创建一个点击事件监听器。可以通过以下代码给场景添加点击事件监听器： ```javascript document.addEventListener('mousedown', onDocumentMouseDown, false); ``` 接下来，需要编写`onDocumentMouseDown`函数来处理鼠标点击事件和获取坐标位置。在该函数中，可以使用Three.js提供的`event`参数来获取鼠标点击的坐标位置。 ```javascript function onDocumentMouseDown(event) { event.preventDefault(); // 获取鼠标点击的位置 const mouse = new THREE.Vector2(); mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 创建一个射线对象 const raycaster = new THREE.Raycaster(); raycaster.setFromCamera(mouse, camera); // 计算射线和场景中物体的交点 const intersects = raycaster.intersectObjects(scene.children, true); // 如果存在交点，则获取交点的坐标位置 if (intersects.length > 0) { const position = intersects[0].point; console.log('点击位置的坐标：', position); } } ``` 以上代码中，`event.clientX`表示鼠标点击的水平位置，`event.clientY`表示鼠标点击的垂直位置。通过计算这两个值与窗口尺寸的比例，可以得到归一化的鼠标位置 `mouse`。 接着，需要使用`THREE.Raycaster`类来发射一条射线，它可以检测该射线与场景中的物体是否有交点。在本例中，将`mouse`和相机对象`camera`作为参数传递给射线对象。 最后，通过`intersectObjects`函数，可以获取到射线与场景物体的交点数组`intersects`。通过判断`intersects`数组的长度是否大于0，可以得知是否存在交点。如果存在，则可以通过`intersects[0].point`来获取第一个交点的坐标位置。 通过以上代码，当用户在浏览器中点击时，会在控制台输出对应的坐标位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

美酒没故事°

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值