javascript - Determining if mouse click happened in left or right half of DIV

Question

I was wondering if it's possible to calculate if a mouse click happened over the left or right half of the div element:

$("div").click(function(e){
 // calculate if click happened on left or right half
});


<div>Variable Content</div>

Was hoping there would be a way to get the relative coordinates and relate them to the width of the div?

Answer 1

$("div").click(function(e){
   var pWidth = $(this).innerWidth(); //use .outerWidth() if you want borders
   var pOffset = $(this).offset(); 
   var x = e.pageX - pOffset.left;
    if(pWidth/2 > x)
        $(this).text('left');
    else
        $(this).text('right');
});

DEMO: http://jsfiddle.net/dirtyd77/QRKn7/1/

Hope this helps! Let me know if you have any questions!