Name your fiddle
Description
HTML
<div id="mybuttons" class="frame">
<button class="button" type="button" data-btn="1-1">button 1 - 1</button>
<button class="button" type="button" data-btn="1-2">button 1 - 2</button>
<button class="button" type="button" data-btn="1-3">button 1 - 3</button><br>
<button class="button" type="button" data-btn="2-1">button 2 - 1</button>
<button class="button" type="button" data-btn="2-2">button 2 - 2</button>
<button class="button" type="button" data-btn="2-3">button 2 - 3</button><br>
<button class="button" type="button" data-btn="3-1">button 3 - 1</button>
<button class="button" type="button" data-btn="3-2">button 3 - 2</button>
<button class="button" type="button" data-btn="3-3">button 3 - 3</button>
</div>
<div id="event-eater" class="frame"></div>
CSS
.frame{
position:absolute;
width:300px;
height:300px;
}
#event-eater{background-color:rgba(0,255,0,0.5);}
JavaScript
$('#mybuttons').on('click','button', function (evt) {
var res = $(this).data('btn');
alert("You clicked item : " + res);
});
$('#event-eater').click(function(evt) {
var posX = $(this).offset().left, posY = $(this).offset().top;
var x = Math.abs(Math.round(evt.pageX - posX));
var y = Math.abs(Math.round(evt.pageY - posY));
var result = "["+x+", "+y+"]";
//if(document['flashInterface'].ClickPosition(result)=="true"){
//$('#event-eater').css({display:'none'});
starter = document.elementFromPoint(evt.clientX, evt.clientY);
$(starter).click();
$('#event-eater').css({display:''});
//};
});