利用JS计算出鼠标位置

最新推荐文章于 2023-04-26 11:49:22 发布
最新推荐文章于 2023-04-26 11:49:22 发布
阅读量383 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/esqlbejsqw/article/details/117395643
版权
本文介绍了如何利用JavaScript的Event对象和clientX/clientY属性来计算并显示鼠标在页面中的坐标。通过onmousemove事件监听鼠标移动，并在事件处理函数中获取鼠标相对于浏览器窗口的水平和垂直坐标。
摘要由CSDN通过智能技术生成

利用JS计算出鼠标位置

开发工具与关键技术：JS

作者：

撰写时间：2021/5/28

首先先了解一下JS JS的全称是 JavaScript

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为

最低0.47元/天 解锁文章
云汐微生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
利用JS判断鼠标移入元素的方向
11-26
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect().top - h/2; var direction = Math.round((((Math.
js常用的三个鼠标坐标获取方法
最新发布
ljxyydx的博客
07-04 7707
鼠标坐标的三个获取方法
js计算鼠标当前相对于某个元素的位置
shidaping的博客
10-13 1万+
先上代码： #mydiv{ border:1px solid grey; width: 400px; height: 200px; } var bindEvent = function(dom, eventName, listener){ if(dom.attachEvent) { dom.attachEvent('o
js 获取元素坐标 和鼠标点击坐标
qq_33207223的博客
04-26 1028
js 获取点击时间鼠标坐标。js 获取元素的位置。
Drag，js实现鼠标拖拽元素
季诗筱的博客
03-09 4211
今天有个需求，就是实现移动端元素的拖拽功能，自己用原生代码写了一个在PC端通过鼠标进行拖拽的例子，代码如下：<!DOCTYPE html> <html> <head> <title>实现拖拽功能</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css">
JavaScript取得鼠标绝对位置程序代码介绍
10-27
除了鼠标位置属性，我们还需要了解一些DOM对象的高度属性，这些属性在计算元素的绝对位置时非常有用： 1. `scrollHeight`：获取对象的完整高度，包括溢出部分。 2. `scrollLeft`：设置或获取对象左边界和窗口中可见...
js获取鼠标点击的位置实现思路及代码
12-02
首先，`event.clientX` 和 `event.clientY` 是JavaScript事件对象中的两个属性，它们分别表示鼠标点击时在水平和垂直方向上相对于浏览器窗口左上角的像素位置。然而，当页面存在滚动条时，这两个属性并不考虑滚动条...
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
10-26
本文将探讨如何使用JavaScript来实现一个基本的交互功能：当鼠标移动到主菜单项上时，弹出相应的子菜单；而当鼠标移开这些子菜单时，它们能自动消失。这种效果常见于网站的导航菜单中，为用户提供快速访问子页面的...
javascript获取鼠标当前位置坐标并显示
06-12
通过以上步骤，我们可以实现在网页上实时显示鼠标位置的功能。这不仅加深了我们对于JavaScript事件处理机制的理解，也提高了我们在Web开发中的实战能力。此外，这种技术还可以应用于许多其他场景，比如实现动态UI...
js中获取元素的当前位置
热门推荐
假面猫的博客
10-24 1万+
js中获取当前位置有如下几种方法： event.offsetWidth, event.offsetHeight, event.clientX, event.clienY, event.scrennX, event.screenY, 他们的区别如下： 可以看出， event.screenX和event.screenY是相对于显示屏的位置。 event.clientX和ev
javascript实时获取鼠标坐标值并显示的方法
10-24
主要介绍了javascript实时获取鼠标坐标值并显示的方法,涉及javascript操作鼠标事件的相关技巧,非常具有实用价值,需要的朋友可以参考下
JS获取鼠标相对位置的方法
10-21
主要介绍了JS获取鼠标相对位置的方法,涉及javascript事件响应及针对页面元素属性的动态操作技巧,需要的朋友可以参考下
JavaScript获取鼠标位置的三种方法
we
05-17 9914
在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果，这篇文章就鼠标点击位置坐标获取做一些简单的总结。 获取鼠标位置首先要了解什么是event，event是一个声明了全局变量的一个对象，在chrome和IE下，可以随意访问，对于好奇的朋友console.log一下event。但！！！Firefox下是没有event这个对象的！！ 好消息的是：在IE8，chrome下，是有event这个对象的！ 鼠标点击位置坐标
html5 js获取鼠标坐标,使用JS检测鼠标相对于DIV元素的位置
weixin_33347102的博客
06-02 1007
JavaScript语言：JaveScriptBabelCoffeeScript确定//not making interfaces today"use strict";var attractive = {new: function(target, radius, action) {var on = function(e) {var box = target.getBoundingClientRec...
js 计算获取鼠标相对某个点的移动旋转角度
小结巴巴的博客
09-13 3361
// 旋转角度 function getAngle(cen, first, second) { 　　　　 // cen : 中心点 [0,0]　　　　 // first : 开始点 [1,3]　　　　 // second : 结束位置 [3,4] var f_c_x = first[0] - cen[0], f_c_y...
鼠标拖拽事件
qq_43241999的博客
10-13 389
鼠标拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
js获取鼠标坐标的方法
weixin_45817492的博客
04-01 1万+
js获取鼠标坐标的方法
js元素距离和鼠标位置整理
qq_50078925的博客
04-25 2076
关于元素距离 offsetTop / offsetLeft ( 距离父级 定位元素/table/td/th/body 的距离 ) offsetWidth / offsetHeight ( 元素的 布局/像素 宽高度 ) clientTop / clientLeft ( 上/左 边框宽度 ) HTMLElement.offsetTop / HTMLElement.offsetLeft -只读属性- offsetTop 返回当前元素相对于其 offsetParent 元素的顶部内边距的距
元素、鼠标位置获取&设置
qq3225592的博客
07-24 786
获取位置 元素位置 Element.getBoundingClientRect() 获取元素相对于窗口的大小、位置（只读）： top / bottom: 上下边到窗口（浏览器界面）顶部(可能负数) left / right : 左右边到窗口左边(可能负数) width / height : 元素的宽高 x / y : 与 top / left 相同，不过兼容性差 注：width / height / x / y 兼容性差，width 可以用 right - left 代替；x / y 干脆不用 滚动位置 w
利用vue开发一套完整的以鼠标位置为中心的滑轮放大缩放功能
05-25
接着，在 `handleMouseWheel` 方法中，我们需要根据鼠标位置计算出需要缩放的比例，然后通过计算得出缩放后的位置，并将其应用到元素上。代码如下： ```javascript handleMouseWheel(event) { const zoomSpeed = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

云汐微生

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值