JS:获取鼠标点击位置

news/2025/2/12 17:53:53

一、获取鼠标在目标元素中的点击位置

getClickPos.ts:

export const getClickPos = (e: MouseEvent) => {return {x: e.offsetX,y: e.offsetY,};
};

二、获取鼠标在页面中的点击位置

getClickPos.ts:

export const getPageClickPos = (e: MouseEvent) => {return {x: e.pageX,y: e.pageY,};
};

三、获取鼠标在视口中的点击位置

getClickPos.ts:

export const getClientClickPos = (e: MouseEvent) => {return {x: e.clientX,y: e.clientY,};
};

四、使用

<template><button @click="clickHandler">
</template>
<script setup lang="ts">
import { getClickPos } from "./getClickPos";
const clickHandler = (e: MouseEvent) => {const pos = getClickPos(e);console.log(pos);
};
</script>


https://dhexx.cn/news/show-5391621.html

相关文章

Docker笔记-Debian容器内搭建ssh服务

登陆容器之后修改密码&#xff1a; passwd 密码设置完成后安装openssh-server apt-get install openssh-server 修改端口号为50022并添加配置 vim /etc/ssh/sshd_config 修改成 Port 50022 PasswordAuthentication yes PermitRootLogin yes 启动 rootlinux:~# /etc/in…

【录制,纯正人声】OBS录制软件,音频电流音,杂音解决办法,录制有噪声的解决办法

速度解决的方法 &#xff08;1&#xff09;用RNNoise去除噪声。RNNoise是一个开源的&#xff0c;效果不好的噪声去除器。使用方法就是点击滤镜&#xff0c;然后加噪声抑制RNNoise。【这方法不好用】 &#xff08;2&#xff09;用Krisp(https://krisp.ai/) 去除噪声。这个Kris…

conda添加镜像源与channels

文章目录 一、conda下添加国内镜像源&#xff08;window下&#xff09;二、pip配置国内镜像源&#xff08;window下&#xff0c;临时修改&#xff09;三、conda源的定义 一、conda下添加国内镜像源&#xff08;window下&#xff09; 1、为【channels】配置清华镜像通道 直接在…

算法体系-19 第十九节 暴力递归到动态规划

一 动画规划的概念 优化出现重复解的递归 一旦写出递归来&#xff0c;改动态规划就很快 尝试策略和状态转移方程是一码事 学会尝试是攻克动态规划最本质的能力 如果你发现你有重复调用的过程&#xff0c;动态规划在算过一次之后把答案记下来&#xff0c;下回在越到重复调用过程…

C++中整型字面量的使用细节

C中整型字面量的使用细节 整型字面值(常量)是显式地书写的常量&#xff0c;如212或1776。与C相同&#xff0c;C能够以三种不同的计数方式来书写整数:基数为10、基数为8(老式UNIX版本)和基数为16(硬件黑客的最爱)。附录A介绍了这几种计数系统:这里将介绍C表示法。C使用前一(两)…

爱,需要学习--如何进入到一段亲密关系

[页面 7]: 亲密关系的经营&#xff0c; 是自我发展的延伸&#xff0c; 只不过和自我发展 相比&#xff0c; 亲密关系的经营有自己的逻辑&#xff0c; 它围绕着两个核心展 开。 [页面 7]: 一个核心是“关系”。“关系”不是你的事&#xff0c;也不是我的事&#xff0c;而 是发生…

Navicat和SQLynx产品功能比较一(整体比较)

Navicat和SQLynx都是数据库管理工具&#xff0c;在过去的二十年中&#xff0c;国内用户主要是使用Navicat偏多&#xff0c;一般是个人简单开发需要&#xff0c;数据量一般不大&#xff0c;开发相对简单。SQLynx是最近几年的数据库管理工具&#xff0c;Web开发&#xff0c;桌面版…

JS读取目录下的所有图片/require动态加载图片/文字高亮

<template class"aa"><div class"demo-image__lazy container"><div class"head"><div class"left-bar"><div><span>综合</span></div><div><span>定位</span><…

C++ 18 之 函数的重载

c18函数的重载.cpp #include <iostream> #include <string.h> using namespace std;void fun4(int a) {cout << "int a: "<< a << endl; } void fun4(double a) {cout << "double a: " << a << endl; }v…

centos7.9如何启动vnc服务

安装步骤 # 安装vncserver yum install tigervnc-server# copy配置文件 cp /lib/systemd/system/vncserver@.service /etc/systemd/system/vncserver@:1.service#修改user用户 vim /etc/systemd/system/vncserver@:1.service# 重新加载systemd管理配置文件 systemctl daemon-r…