博客

如何使用JQuery获得目标元素的相对点击坐标

  • Post category:jquery

使用JQuery获得目标元素的相对点击坐标可以分为以下几个步骤：

  1. 绑定点击事件

使用JQuery的.on方法，绑定目标元素的点击事件。

$(document).on("click", "#target-element", function(event) {
  // 在这里处理点击事件
});
  1. 获取目标元素的相对位置

使用JQuery的.offset方法获取目标元素相对于页面左上角的位置。

var offset = $("#target-element").offset();
  1. 获取鼠标点击位置的相对坐标

使用事件对象的pageX和pageY属性，获取鼠标点击位置相对于页面左上角的位置。

var x = event.pageX;
var y = event.pageY;
  1. 计算相对坐标

将鼠标点击位置的相对坐标减去目标元素的相对位置，即可得到目标元素内部的相对点击坐标。

var relativeX = x - offset.left;
var relativeY = y - offset.top;

以下是两个示例：

示例一：获取图片内部点击位置

HTML代码：

<div id="image-container">
  <img src="example.jpg" id="example-image">
</div>

JQuery代码：

$(document).on("click", "#example-image", function(event) {
  var offset = $(this).offset();
  var x = event.pageX;
  var y = event.pageY;
  var relativeX = x - offset.left;
  var relativeY = y - offset.top;

  console.log("相对点击坐标：x=" + relativeX + ", y=" + relativeY);
});

示例二：获取div内部点击位置

HTML代码：

<div id="example-div">
  <div id="inner-div"></div>
</div>

JQuery代码：

$(document).on("click", "#inner-div", function(event) {
  var offset = $("#example-div").offset();
  var x = event.pageX;
  var y = event.pageY;
  var relativeX = x - offset.left;
  var relativeY = y - offset.top;

  console.log("相对点击坐标：x=" + relativeX + ", y=" + relativeY);
});
Tags: