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>
相关推荐
长存祈月心13 分钟前
Rust 迭代器适配器
java·服务器·前端
先树立一个小目标18 分钟前
puppeteer生成PDF实践
前端·javascript·pdf
冲刺逆向21 分钟前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
啃火龙果的兔子22 分钟前
Promise.all和Promise.race的区别
前端
马达加斯加D25 分钟前
Web身份认证 --- OAuth授权机制
前端
2401_8370885025 分钟前
Error:Failed to load resource: the server responded with a status of 401 ()
开发语言·前端·javascript
全栈师26 分钟前
LigerUI下frm与grid的交互
java·前端·数据库
叫我詹躲躲26 分钟前
被前端存储坑到崩溃?IndexedDB 高效用法帮你少走 90% 弯路
前端·indexeddb
无尽夏_26 分钟前
CSS3(前端基础)
前端·css·1024程序员节
温宇飞28 分钟前
Next.js 简述 - React 全栈框架
前端