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印刷し

助けてください、よりks。

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>

---

更新

あなたの質問で編集したコードは、あなたの代わりにunbind()とbind()のoff()とon()を使用する必要があるにもかかわらず、（正常に動作する必要があります）。コンソールのエラーをチェックしましたか？

$('.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、マウスダウン）のいずれかを使用して関数にイベント引数を渡します。関数内で、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

あなたは

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