如何在javascript中获得div点击部分？答案

【问题标题】：How to get div clicked part in javascript?如何在javascript中获得div点击部分？
【发布时间】：2017-04-17 16:46:56
【问题描述】：

我正在尝试复制诸如音量滑块或视频搜索栏之类的东西，当用户单击某个点时，指示器会跳转到该位置。

为此，我试图在div 上获取点击事件的位置。当用户单击我的 div 上的某个位置时，我试图返回 x、y 坐标。

到目前为止，我只有一个 div 和一个基本的监听器：

<div class="heybro" style="width:100px;height:100px;background:black;"></div>

$('.heybro').click(function(){
    alert("something");
});

【问题讨论】：

Using jQuery how to get click coordinates on the target element的可能重复
您可以在这个位置添加元素并在其顶部添加事件监听器
你也可以参考这个：stackoverflow.com/questions/7034342/jquery-onclick-on-div
jQuery 中没有“onclick”

标签： javascript jquery html

【解决方案1】：

尝试在您的点击处理程序中使用event 对象：

$('.heybro').click(function(e) {
  console.log("click location in page:");
  console.log(e.pageX, e.pageY);
  var offset = $(this).offset()
  console.log("click location in div:");
  console.log(e.pageX - offset.left, e.pageY - offset.top);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heybro" style="width:100px;height:100px;background:black;"></div>

查看此答案了解更多详情：https://stackoverflow.com/a/3236129/123415

【讨论】：

感谢它有效，但是当我点击第 20 位时，我的 e.pageY 值显示为 472。
好吧，我认为它显示了body 的位置，而不是我的div 元素位置，你能告诉我为什么要这样做吗？仅供参考：我使用的代码与您上面所说的完全相同。

【解决方案2】：

    $(".heybro").onclick(function() {
        var $clicker = $(this);
        var pos = $clicker.position();
        console.log(pos.top);
        console.log(pos.left);
    });

为任何想了解其工作原理的人提供了清晰的解释。

var $clicker = $(this);

$clicker 变量被初始化，创建了一个新的特殊 jQuery 对象。为了使用第二种方法，jQuery.position，我们需要这样做来创建一个新变量，其中包含点击的顶部偏移量和左侧偏移量。

var pos = $clicker.position();

我们现在可以访问“top”和“right”属性，它们表示用户点击的位置，相对于顶部和左侧坐标。

【讨论】：