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 Oleh Kotsubko

HTML

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

CSS

.clickable {
    border: 1px solid #333;
    background: #eee;
    height: 200px; width: 200px;
    margin: 15px;
    position: relative;
    cursor: pointer;
}
.display {
    display: block;  
}

.deleter{
   color: red; 
   cursor: pointer;
   display: inline-block;
   padding: 0 15px;
}

.binder {
  color: green;
  cursor: pointer;
  display: inline-block;
  padding: 0 15px;
}

.dot {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background: red;
  border-radius: 50%;
}

JavaScript

var increment = 0;
$('.clickable').on('click', function (ev) {
increment++;
    var $div = $(ev.target),
        $display = $('.display'),
        $containerWidth = $div.width(),
        $containerHeight = $div.height(),
        offset = $div.offset(),
        x = ev.clientX - offset.left,
        y = ev.clientY - offset.top,
        percentX = (ev.clientX - offset.left)*100/$containerWidth,
        percentY = (ev.clientY - offset.top)*100/$containerHeight;
    
    var listItem = $('<li/>', {
    	class: 'link' + increment,
      text: 'x: ' + percentX + '%,  y:' + percentY+'%'
    });
    
    var deleterDot = $('<a/>', {
    	class: 'deleter',
      text: 'Удалить?'
    });
    
    var bindGoods = $('<a/>', {
    	class: 'binder',
      text: 'Привязать товар?'
    });
    
    var link = $('<a/>',{
        id:'link' + increment,
        class: 'dot',
        css:{
            top: percentY+'%',
            left: percentX+'%'
        }
    })
    
    $(this).append(link);
    $display.append(listItem);
    $('.link' + increment).append(deleterDot, bindGoods);

 });
 
 $(document).on('click', '.deleter', function(){
    $(document).find('#'+$(this).parent('li').attr('class')).remove();
    $(this).parent().remove();
 });
 
 $(document).on('click', '.binder', function(){
    alert('write own event handler');
 });