JS：获取鼠标点击位置

一天只码五十行2024-06-20 17:16

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

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>