Tips for identifying the clicked location inside an element using JavaScript?

Question

Tips for identifying the clicked location inside an element using JavaScript?

Is there a way in JavaScript to find out the exact position of a click within an element, like its distance from the left, right, or center? I'm struggling to determine whether the clicked area is on the left, center, or right side.

https://i.stack.imgur.com/8bpwe.png

Below is the table I am working with -

<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>

Here's my current JavaScript code snippet -

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

When I click on the second <td>, it prints undefined undefined in the console.

Your help will be greatly appreciated. Thank you.

javascript jquery css

Answer 1

Answer №1

To access the offsetX and offsetY properties from the click event handled, you can use this code:

$('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>

Update

The revised code provided in your query should work effectively (note that it is recommended to use off() and on() instead of unbind() and bind()). Make sure to check the browser console for any possible errors.

 $('.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

To access the offsetX and offsetY properties from the click event handled, you can use this code:

$('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>

Update

The revised code provided in your query should work effectively (note that it is recommended to use off() and on() instead of unbind() and bind()). Make sure to check the browser console for any possible errors.

 $('.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 3

Answer №2

Implement any of the mouse events (mousemove, mouseup, mousedown) and pass the event argument to a function. Within that function, you will be able to retrieve the coordinates by accessing the clientX & clientY properties.

Here's a simple example:

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

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

Answer 4

Implement any of the mouse events (mousemove, mouseup, mousedown) and pass the event argument to a function. Within that function, you will be able to retrieve the coordinates by accessing the clientX & clientY properties.

Here's a simple example:

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

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

Answer 5

Answer №3

To achieve this, adjust the td's position by using offset and determine the click position in the window

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

Answer 6

To achieve this, adjust the td's position by using offset and determine the click position in the window

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

Tips for identifying the clicked location inside an element using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Creating a Loopback API that seamlessly integrates with Ember.js

Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

The specified container does not exist in the DOM: MERN

Unable to set a JSON data as a value for a JavaScript variable

What could be causing my Node.js website to have trouble locating pages in the public directory?

What steps can I take to prevent my menu items from overlapping in the mobile navigation menu?

Maintain the tab order for elements even when they are hidden

display the HTML form when the page is clicked

Node application experiencing issues retrieving SVG files during production

Navigate to the end of the progress bar once finished

A guide on integrating mat-select into Angular input fields

Ways to retrieve textStatus beyond ajax boundaries

ng-repeat not functioning properly with FileReader

Tips for using the deferred method in ajax to enhance the efficiency of data loading from a php script

Regular expression for selecting characters and numbers in jQuery using a selector

Eliminate the empty gap preceding the slideshow

Guide for showing an alert message after submitting a form using PHP and jQuery

Every time I adjust the browser height on my landing page, the elements start to overlap each other

Tips for dynamically creating column headings and table values using JSON arrays in AngularJS

Import MDX metadata in Next.js on the fly