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!

Answer 2

This should do it:

$("div").click(function(e){
    var $div = $(this);
    alert(e.pageX >= ($div.offset().left + $div.width()/2) ? 'clicked right' : 'clicked left');
});

Answer 3

var x = evt.pageX - $(this).offset().left

if (x > $(this).width()/2) {
  //Right half
} else {
  //Left half
}

So the full code would be

$("div").click(function(e){
   // calculate if click happened on left or right half
  var x = evt.pageX - $(this).offset().left

  if (x > $(this).width()/2) {
    //Right half
  } else {
    //Left half
  }
});

Answer 4

To get the position of mouse within, you can calculate the difference between the mouse position and the div offset. Then compare it with the half width of the div itself and voilà.

EDIT

$(function ()
{

    $("#test").click(function(e){
       var offset = $(this).offset(); 
       var pos_x = e.pageX - offset.left;
       var middle = $(this).outerWidth() / 2;

       if(pos_x < middle)
       {
           alert('left part');
       }
       else
       {
             alert('right part');
       }
    });

});

You can check it out here:

http://jsfiddle.net/kZuML/

Answer 5

Fiddle because you know - YOLO!

$("#special").on('click', function(e){

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop; //You probably don't need Y. Unless you want to know height as well.

    var width = $(this).width(),
        where = width / 2;
    if( x > where ){
        console.log("Click was on the right");
    } else {
        console.log("Click was on the left");
    }
});

Answer 6

PURE JAVASCRIPT solution-Joining late to the party. but recenlty done this using my code. on body tag or div give it ID and call javascript function eg. id="tt" onclick="showCoords(event)"

 function showCoords(event) {
        var x = event.clientX;
        var y = event.clientY;
    //    var coor = "X coords: " + x + ", Y coords: " + y;
    //    document.getElementById("demo").innerHTML = coor;
        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
            alert('right click');

        }
        else
       {
           alert('left click');

        }


    }

Answer 7

A working JS solution:

onClick(e) {
    const clickTarget = e.target;
    const clickTargetWidth = clickTarget.offsetWidth;
    const xCoordInClickTarget = e.clientX - clickTarget.getBoundingClientRect().left;
    if (clickTargetWidth / 2 > xCoordInClickTarget) {
      // clicked left
    } else {
      // clicked right
    }
  }