Determining if mouse click happened in left or right half of DIV
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
}
}
$("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!
This should do it:
$("div").click(function(e){
var $div = $(this);
alert(e.pageX >= ($div.offset().left + $div.width()/2) ? 'clicked right' : 'clicked left');
});