如何確定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

您可以從傳遞給點擊處理程序的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> 

Answer 2

使用任何鼠標事件（mousemove，mouseup，mousedown），並將事件參數傳遞給函數。 在函數內部，您可以訪問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;
}

Answer 3

您可以通過偏移td的位置並單擊窗口中的位置來完成

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