Get Mouse Click Coordinates

For StackOverflow question: http://stackoverflow.com/questions/2159044/getting-the-x-y-coordinates-of-a-mouse-click-on-an-image-with-jquery

by devangkantharia

HTML

<div class='clickable'> <span class='display'></span>

</div>
<span class="log"></span>

CSS

.clickable {
    border: 1px solid #333;
    background: #eee;
    height: 200px;
    width: 200px;
    margin: 15px;
    position: absolute;
}
.display {
    display: block;
    height: 16px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    top: 50%;
    margin-top: -8px;
}
.log {
    display: block;
    position: absolute;
    top: 220px;
}

JavaScript

var clicks = [],
    updatedClicks = "";
$('.clickable').bind('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;

    $display.text('x: ' + x + ', y: ' + y);
    clicks.push(x + "/" + y);

    updatedClicks += "coordinates" + " " + clicks.length + ":" + " " + clicks[clicks.length - 1] + "<br />";

    $('.log').html(updatedClicks);
});