Geek asks and answers

Determining if a mouse click was in the left or right half of the DIV

I was wondering if it was possible to calculate whether there was a mouse click on 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 there any hope that it would be possible to obtain relative coordinates and relate them to the width of the div?

+10
source share
7 answers
$("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!

+19
source

This should do it:

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

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

,

$("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
  }
});
+3

, div. div voilà.

$(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');
       }
    });

});

:

http://jsfiddle.net/kZuML/

+2

Fiddle, - 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");
    }
});
+1

PURE JAVASCRIPT - . recenlty , . body div javascript, . 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');

        }


    }
+1

JS:

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

More articles:


All Articles