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

Spacious width that doesn't require a horizontal scrollbar for navigation

What does AJAX refer to when it comes to managing requests that are still in progress?

Iterate through the xml.documentElement in a loop

Button component in React remains visible until interacted with

Arrange pictures and div elements in a horizontal layout

Glitch Uncovered in Excel Spreadsheet I Exported

Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

Problem with React Native Camera: Camera display is not functioning correctly - React-Native-Vision-Camera Error

Having trouble with redirecting a website to its appropriate version for mobile or desktop users?

What could be causing me to receive an undefined output when trying to access an array stored within an object

What is the correct way to maintain focus on a nested scrolling div over another scrolling div with jQuery?

When the children within a CSS container are floated, set the height of the container to

Utilize JavaScript to identify the orientation of an iPad device

Can someone explain to me how I can customize the background of a bootstrap container?

Scope challenges with making multiple rest calls in Angular.js

Using the JavaScript JSX syntax, apply the map function to the result of a

What could be causing my radio button list to stop functioning correctly? (After applying CSS)

Using Angular to display asynchronous data with ngIf and observables

Exploring the concept of next middle-ware within the realm of Express.js and Sail.js controllers

Issue with arranging cards in a grid when utilizing v-for alongside bootstrap