JS:获取鼠标点击位置

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

getClickPos.ts:

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

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

getClickPos.ts:

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

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

getClickPos.ts:

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

四、使用

html 复制代码
<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>
相关推荐
冴羽4 分钟前
SvelteKit 最新中文文档教程(18)—— 浅层路由和 Packaging
前端·javascript·svelte
哀木19 分钟前
聊聊前端埋点 clarity:我会一直视监你... 永远...
前端
墨渊君23 分钟前
Expo 入门指南:让 React Native 开发更轻松(含环境搭建)
前端·javascript·react native
xnian_30 分钟前
策略模式实际用处,改吧改吧直接用,两种方式
java·服务器·前端
jane_xing32 分钟前
Next.js + SQLite 项目 Docker 生产环境部署方案
javascript·docker·sqlite
31535669131 小时前
一文带你了解二维码扫码的全部用途
前端·后端
七月shi人1 小时前
用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)
前端·小程序·ai编程
Billy Qin1 小时前
Rollup详解
前端·javascript·rollup
夜寒花碎1 小时前
前端自动化测试一jest基础使用
前端·单元测试·jest
气π1 小时前
【Vue-组件】学习笔记
vue.js·笔记·学习