Set up a click event using mouse position in jQuery

Question

Can anyone tell me how I can assign a click function to particular coordinates within an element?

possible duplicate of http://stackoverflow.com/questions/2845178/triggering-a-javascript-click-event-at-specific-coordinates — Ibrahim Azhar Armar, May 14 '12 at 08:50
not a duplicate - If I understand him correctly, the OP wants to _register_ a handler for a particular location, not fake an event. — Alnitak, May 14 '12 at 08:52
with what granularity - a rectangle, a single pixel, something else? — Alnitak, May 14 '12 at 08:52
yeah, just a small rectangle needs to be clickable, i can't use an element because it would interfere with other functionality i have. — Christopher Camplin, May 14 '12 at 10:52

score 1 · Answer 1 · answered May 14 '12 at 09:00

Hiya demo http://jsfiddle.net/gYkXS/3/

Hope this helps, have a nice one! cheers!

code

$(document).ready(function(){
   $("#foo").mousemove(function(e){
      window.xPos = e.pageX;
      window.yPos = e.pageY;
       alert("Position X = " + e.pageX + "Position y = " + e.pageY);
   }); 
});

score 1 · Accepted Answer · answered May 14 '12 at 09:00

1

$(document).click(function(event) {
    var top = 0,
        right = 200,
        bottom = 200,
        left = 0;


    var x = event.pageX;
    var y = event.pageY;
    if ((x >= left && x <= right) && (y >= top && y <= bottom))
    {
        // do stuff if within the rectangle
    }
});

answered May 14 '12 at 09:00

Supericy

5,866
1
21
25

This seems to be working ok, but is there a way to easily define a small width and height of the clickable area ? Any chance of some help on defining where the clickable area is ? – Christopher Camplin May 14 '12 at 11:54
You could use Jquery's $(...).offset() method to grab the absolute x and y of your element. so like left = $(elm).offset().left, top = $(elm).offset().top; and then add the width & height you want for the other sides of the bounding box. – Supericy May 14 '12 at 21:12
Would that be the if statement ? – Christopher Camplin May 15 '12 at 09:43

score 0 · Answer 3 · answered May 14 '12 at 08:57

If you only want part of the element to respond to a click (which is how I read your question), you can do that by looking at where the click happened.

Example: live copy | source

jQuery(function($) {

  $("#target").click(function(event) {
      var $this = $(this),
          width = $this.width(),
          pos = $this.offset(),
          x = event.pageX - pos.left,
          y = event.pageY - pos.top;

      display("Click was at (" + x + "," + y + ") in the element");
      if (x > (width / 2)) {
          display("Clicked in the right half");
      }
  });


  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

event.pageX and event.pageY are document coordinates, which are what the offset function gives you for the element. (Despite the name, offset does not give you the offset relative to the element's offset parent; that's position. Strange but true.) So you can translate event.pageX and event.pageY to element coordinates by simply subtracting pos.left from event.pageX and pos.top from event.pageY.

score 0 · Answer 4 · edited May 14 '12 at 18:10

Every event in jquery has pageX and pageY properties. So if you fire an event, you can check the coordinates:

$('#elem').click(function(e)) {
    var x = e.pageX;
    var y = e.pageY;
    if (x > x1 && x < x2 && y > y1 && y < y2) {
         do_something
    }
}

In this case x1, x2, y1, y2 are the coordinates of rectangle.

pageX, pageY are the page coordinates, if you need the relative ones within an element you need to get position of the element on the page then calculate the real coords basing on the element position.

score 0 · Answer 5 · answered May 14 '12 at 08:59

Live example http://jsfiddle.net/LBKTe/1

Basically same thing as AlecTMH described above.

// top left and botom right corners of the clickable area
var x1 = 10, x2 = 30, y1 = 10, y2 = 30;
$(document).on('click', '#block', function(e) {
    // get x/y coordinates inside    
    var cx = e.clientX;
    var cy = e.clientY;
    offset = $(this).offset();
    x = cx-offset.left;
    y = cy-offset.top;

    // if our click coordinates are within constrains, show an alert
    if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
      alert('click!');            
    }
});

Alnitak · Answer 6 · 2012-05-14T09:19:59.213

0

If there's only a small number of "areas of interest" you can avoid capturing mouse clicks on the entire element by superimposing one or more empty elements of the required size with a position: absolute style and a high z-index, i.e.:

.hotspot {
    position: absolute;
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
}

div {
    position: relative;
}

canvas {
    background-color: #f0f0f0;
}

<div class="frame">
    <canvas width="400" height="400"> </canvas>
    <div class="hotspot" style="left: 100px; top: 100px; width: 40px; height: 40px">
    </div>
</div>

see http://jsfiddle.net/VUx2G/2/

edited May 14 '12 at 09:19

answered May 14 '12 at 09:04

Alnitak

334,560
70
407
495

Unfortunately i need there to be no element for the click function otherwise it disrupts other functionality, thanks for the help though. – Christopher Camplin May 15 '12 at 09:17

Set up a click event using mouse position in jQuery

6 Answers6