【JS】【Vue3】【React】获取鼠标位置的方法:JavaScript、Vue 3和React示例

目录

  • 使用JavaScript原生方法
  • 在Vue 3中获取鼠标位置
  • 在React中获取鼠标位置

随着Web应用程序的复杂性不断增加,获取用户交互信息变得越来越重要。其中,获取鼠标位置是一项常见的任务,可以用于实现各种交互效果,如拖拽、悬停提示等。本文将探讨在JavaScript、Vue 3和React中获取鼠标位置的不同方法,并提供相应的示例。

使用JavaScript原生方法

在纯JavaScript中,我们可以使用事件监听器来获取鼠标位置。具体步骤如下:

document.addEventListener('mousemove', function(event) {const mouseX = event.clientX;const mouseY = event.clientY;console.log('鼠标位置:', mouseX, mouseY);
});

通过监听mousemove事件,我们可以获取鼠标在页面中的位置,并在控制台输出。

在Vue 3中获取鼠标位置

在Vue 3中,我们可以利用@mousemove指令来监听鼠标移动事件,并通过方法获取鼠标位置。具体示例代码如下:

<template><div @mousemove="handleMouseMove">Move your mouse</div>
</template><script>
export default {methods: {handleMouseMove(event) {const mouseX = event.clientX;const mouseY = event.clientY;console.log('鼠标位置:', mouseX, mouseY);}}
};
</script>

在React中获取鼠标位置

在React中,我们可以使用事件监听器来获取鼠标位置,与JavaScript原生方法类似。下面是一个简单的React示例:

import React from 'react';class MouseTracker extends React.Component {handleMouseMove(event) {const mouseX = event.clientX;const mouseY = event.clientY;console.log('鼠标位置:', mouseX, mouseY);}render() {return (<div onMouseMove={this.handleMouseMove}>Move your mouse</div>);}
}export default MouseTracker;

跳转:【JS】【Vue3】【React】获取滚轮位置的方法:JavaScript、Vue 3和React示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/705736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过curl 请求接口 /usr/bin/curl: Argument list too long

因为要发送的json数据为图片的base64码&#xff0c;使用该命令时提示参数过长&#xff0c;解决方法使用如下命令 curl -X POST -d data.json http://example.com/api 将要发送的报文体放入data.json 然后执行 使用来从文件中读取数据而不是直接在命令行上写入大量数据 示例&…

【目标检测新SOTA!v7 v4作者新作!】YOLO v9 思路设计 + 全流程优化 + 手把手训练自己数据

YOLO v9 思路复现 全流程优化 手把手训练自己数据 提出背景&#xff1a;深层网络的 信息丢失、梯度流偏差YOLO v9 设计逻辑可编程梯度信息&#xff08;PGI&#xff09;&#xff1a;使用PGI改善训练过程广义高效层聚合网络&#xff08;GELAN&#xff09;&#xff1a;使用GELAN…

java面试:分布式事务理论基础(CAP原理、BASE理论、本地事务)

文章目录 引言I 基础知识1.1 事务(Transaction)1.2 本地事务1.3 分布式事务II 分布式理论2.1 CAP原理2.2 BASE理论2.3 刚柔事务2.4 解决分布事务模型2.5 2PC2.6 3PC2.7 TCC(Try-Confirm-Cancel)补偿事务引言 分布式事务:实现跨服务事务回滚,需要用到分布式事务。

华为数通方向HCIP-DataCom H12-821题库(单选题:481-500)

第481题 以下关于基于SD-WAN思想的EVPN互联方案的描述,错误的是哪一项? A、通过部署独立的控制面,将网络转发和控制进行了分离,从而实现了网络控制的集中化 B、通过对WAN网络抽象和建模,将上层网络业务和底层网络具体实现架构进行解耦,从而实现网络自动化 C、通过集中的…

四、分类算法 - 决策树

目录 1、认识决策树 2、决策树分类原理详解 3、信息论基础 3.1 信息 3.2 信息的衡量 - 信息量 - 信息熵 3.3 决策树划分的依据 - 信息增益 3.4 案例 4、决策树API 5、案例&#xff1a;用决策树对鸢尾花进行分类 6、决策树可视化 7、总结 8、案例&#xff1a;泰坦尼…

深度学习手写字符识别:推理过程

说明 本篇博客主要是跟着B站中国计量大学杨老师的视频实战深度学习手写字符识别。 第一个深度学习实例手写字符识别 深度学习环境配置 可以参考下篇博客&#xff0c;网上也有很多教程&#xff0c;很容易搭建好深度学习的环境。 Windows11搭建GPU版本PyTorch环境详细过程 数…

stable diffusion学习笔记 手部修复

图片手部修复原理 某张图片在生成后&#xff0c;仅有手部表现不符合预期&#xff08;多指&#xff0c;畸形等&#xff09;。这种情况下我们通常使用【局部重绘】的方式对该图片的手部进行【图生图】操作&#xff0c;重新绘制手部区域。 但是仅采用重绘的方式也很难保证生成的…

python爬虫实战:获取电子邮件和联系人信息

引言 在数字时代&#xff0c;电子邮件和联系人信息成为了许多企业和个人重要的资源&#xff0c;在本文中&#xff0c;我们将探讨如何使用Python爬虫从网页中提取电子邮件和联系人信息&#xff0c;并附上示例代码。 目录 引言 二、准备工作 你可以使用以下命令来安装这些库&a…

将文件从windows传入到ubuntu

实现效果图 2.方法&#xff1a; 2.1打开 Ubuntu 的终端窗口&#xff0c;然后执行如下命令来安装 FTP 服务 输入&#xff1a;sudo apt-get install vsftpd 等待软件自动安装&#xff0c;安装完成以后使用如下 VI 命令打开/etc/vsftpd.conf&#xff0c;命令如下&#xff1a;su…

6.二元操作符

平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我。 跟着我从0学习JAVA、spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信公众号【 IT特靠谱 】,每天都会分享技术心得~ 1.二元操作符 用户可以使用这些操作符对时…

Git Windows安装教程

Git简介 Git是目前世界上最先进的分布式版本控制系统。它的工作原理 / 流程如下&#xff1a; [ Workspace:工作区 Index / Stage:暂存区 Repository:仓库区&#xff08;或本地仓库&#xff09; Remote:远程仓库 ] Git的下载 去 Git 官网下载对应系统的软件了&#xff0c;下…

用39块钱的全志V851se视觉开发板做了个小相机,还可以物品识别、自动追焦!

用39块钱的V851se视觉开发板做了个小相机。 可以进行物品识别、自动追焦&#xff01; 这个超低成本的小相机是在V851se上移植使用全志在线开源版本的Tina Linux与OpenCV框架开启摄像头拍照捕获视频&#xff0c;并结合NPU实现Mobilenet v2目标分类识别以及运动追踪等功能…并最终…

【Redis】redis配置与数据类型

Redis 配置 Redis 的配置文件位于 Redis 安装目录下&#xff0c;文件名为 redis.conf。在日常使用中&#xff0c;我们一般只会修改一些比较重要的参数。当然redis是支持很多配置参数的&#xff0c;感兴趣的可以自行了解所有的参数&#xff0c;有个大致印象即可。我们可以通过 …

dolphinscheduler集群部署教程

文章目录 前言一、架构规划二、配置集群免密登录1. 配置root用户集群免密登录1.1 hadoop101节点操作1.2 hadoop102节点操作1.3 hadoop103节点操作 2. 创建用户2.1 hadoop101节点操作2.2 hadoop102节点操作2.3 hadoop103节点操作 三、安装准备1. 安装条件2. 安装jdk3. 安装MySQL…

千兆宽带和全屋WiFi覆盖

文章目录 千兆宽带是否真的需要千兆宽带2.4G 和 5G2.4G 无法支持千兆带宽5G 的最高理论速率是依据 WiFi 标准而有不同值 WiFi 5 和 WiFi 6、WiFi 7WiFi 5 就可以支持千兆宽带WiFi 6 是目前千兆宽带的最佳性价比选择WiFi 7 还不是完全体&#xff0c;待观察后续 6GHz 频段支持情况…

linuxsocket阻塞recv怎么返回

recv是socket编程中最常用的函数之一&#xff0c;在阻塞状态的recv有时候会返回不同的值&#xff0c;而对于错误值也有相应的错误码&#xff0c;分别对应不同的状态&#xff0c;下面是我针对常见的几种网络状态的简单总结。首先阻塞接收的recv有时候会返回0&#xff0c;这仅在对…

“智能语音指令解析“ 基于NLP与语音识别的工单关键信息提取

“智能语音指令解析“ 基于NLP与语音识别的工单关键信息提取 1. 背景介绍1.1 场景痛点1.2 方案选型 2. 准备开发环境3. PaddleSpeech 语音识别快速使用4. PaddleNLP 信息抽取快速使用5. 语音工单信息抽取核心功能实现6. 语音工单信息抽取网页应用6.1 网页前端6.2 网页后端6.3 a…

C# Onnx yolov8-obb 旋转目标检测

目录 效果 模型信息 项目 代码 下载 C# Onnx Yolov8-OBB 旋转目标检测 效果 模型信息 Model Properties ------------------------- date&#xff1a;2024-02-26T08:38:44.171849 description&#xff1a;Ultralytics YOLOv8s-obb model trained on runs/DOTAv1.0-ms.ya…

解决:“出现问题,Outlook 无法设置你的账户”

原文&#xff1a;https://blog.iyatt.com/?p14213 1 问题描述 Office 专业版 2024 预览版 在 Outlook 输入邮箱后无法进一步配置登录信息&#xff08;腾讯企业邮箱 Exchange 登录&#xff09; 2 解决方法 通过控制面板里的邮箱设置可以正常添加登录&#xff0c;而且能…

【总第49篇】2.3深度学习开发任务实例(2)机器学习和深度学习的对比【大厂AI课学习笔记】

机器学习和深度学习都是用于图片分类任务的强大工具&#xff0c;但它们采用的方法和原理有所不同。下面我将分别解释这两种技术是如何应用于图片分类的&#xff0c;并着重讨论深度学习中的卷积概念。 机器学习在图片分类中的应用 传统的机器学习方法在进行图片分类时&#xf…