如何确定JavaScript中元素的点击位置？

Question

在JavaScript中是否有任何方法可以确定元素中的点击位置或距左，右或中心的距离？我无法确定点击区域的位置（左侧，中间或右侧）。

我有以下表格 -

<tr id="ing-117">
    <td style="width: 15%; vertical-align: middle; display: none;"><img src="arrow-left.png" class="arrow left hidden"></td>
    <td style="width: 70%; text-align: left;" class="txt center lefted"><div class="in"></div>2 cups ice</td>
    <td style="width: 15%; vertical-align: middle;"><img src="arrow-right.png" class="arrow right hidden"></td>
</tr>

这是我的js代码 -

 $('.arrow').unbind('click')
        .bind('click', function(event, is_triggered){
            var th = $(this);
            var x = event.clientX;
            var y = event.clientY;
            console.log(x , y);

但是当我点击第二个<td>时，它会在控制台

中打印undefined undefined

请帮助，谢谢。

Answer 1

您可以从传递给点击处理程序的点击事件中检索offsetX和offsetY属性。试试这个：

$('div').click(function(e) {
  var clickX = e.offsetX;
  var clickY = e.offsetY;
  $('span').text(clickX + ', ' + clickY);
});

div {
  width: 150px;
  height: 25px;
  border: 1px solid #000;
  background-color: #EEF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<span></span>

更新

您问题中的已修改代码应该可以正常工作（即使您应该使用off()和on()代替unbind()和bind()）。你检查过控制台是否有错误吗？

 $('.arrow').off('click').on('click', function(e) {
   var th = $(this);
   var x = e.clientX;
   var y = e.clientY;
   console.log(x, y);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="ing-117">
    <td style="width: 15%; vertical-align: middle; display: none;">
      <img src="arrow-left.png" class="arrow left hidden">
    </td>
    <td style="width: 70%; text-align: left;" class="txt center lefted">
      <div class="in"></div>
      2 cups ice
    </td>
    <td style="width: 15%; vertical-align: middle;">
      <img src="arrow-right.png" class="arrow right hidden">
    </td>
  </tr>
</table>

Answer 2

使用任何鼠标事件（mousemove，mouseup，mousedown）并将事件参数传递给函数。在功能内部，您可以访问clientX＆amp; clientY属性获取坐标。

一个例子：

<div onmousemove="showCoords(event)"></div>

function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coor = "X coords: " + x + ", Y coords: " + y;
}

Answer 3

您可以通过td的偏移位置和窗口中的单击位置

来完成

$(document).on('click','td_selector',function(){
     alert(e.pageX-$(this).offset().left)+"::"+ (e.pageY-$(this).offset().top));
})