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

JavaScript中是否有任何方法来确定元素内的点击位置或距离左侧，右侧或中心的距离？我无法确定点击区域的位置（左侧，中间或右侧）。如何确定在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

请帮忙，比KS。

来源

2016-08-03 Sachin Vairagi

事件对象（第一个参数事件处理程序）的一些属性，可以帮助 –

http://stackoverflow.com/questions/7790725/javascript-track-mouse-position检查这个问题了。 – Krandalf

您可以从传递给点击处理程序的click事件中检索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>

来源

2016-08-03 09:19:17

可以请你检查更新的问题。谢谢你！ –

尽管你应该使用'off（）'和'on（）'，你更新的代码应该可以正常工作。查看我更新的答案以获得一个工作示例 –

使用任何鼠标事件（鼠标移动，鼠标松开，鼠标按下）和事件参数传递给函数。在函数内部，您可以访问clientX & 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; 
}

来源

2016-08-03 09:20:25

您可以通过TD的偏移位置做，单击窗口位置

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

来源

2016-08-03 09:29:09

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

回答

相关问题