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>
相关推荐
前端付豪2 分钟前
3、Node.js异步编程彻底吃透
前端·后端·node.js
Bob99986 分钟前
Amlogic S905L3系列盒子 ROM DIY相关
java·javascript·数据仓库·vscode·eclipse·tomcat·vim
孤鸿玉7 分钟前
[Flutter小试牛刀] 低配版signals,添加局部刷新
前端·flutter
亦黑迷失8 分钟前
轻量级 Express 服务器:用 Pug 模板引擎实现动态参数传递
前端·javascript·后端
吃瓜群众i1 小时前
理解Javascript闭包
前端·javascript
安大桃子1 小时前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede1 小时前
多行文本省略号显示,更多按钮展开全部
前端
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化
G扇子1 小时前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全
Blucas1 小时前
《深入 PageSpy》二:入门指南
javascript·前端框架