How to submit click via x and y orientation?

Question

I have a remote control pen as cursor (hardware).

External hardware via SDK to Javascript i receive a cursor. Where i get x, x, y, y position and click command.

But, How to submit click on that position? (no matter whatever Element is there on that position, i need to submit the click on that position)

if (_label == rs.cursor.GestureType.CURSOR_CLICK) {
                  // I have: x, x, y, y                   
/*
Following method works:
but i have too many buttons, how to apply dynamic click without tracking which element?

                  var myButton = document.getElementById("mediaplayer");
                  var rect = myButton.getBoundingClientRect();
                  if (x >= rect.left && 
                      x <= rect.right && 
                      y >= rect.top && 
                      y <= rect.bottom){
                    myButton.click();
                  }
*/
}

EDIT:

        //
        // 1 - Find Active DIV/MAP/Container?           
        //
        var layerID = $('#layoutmain').attr('usemap');            
        if (_label == rs.cursor.GestureType.CURSOR_CLICK) {     

          //
          // 2 - Loop each buttons of that container
          //
          $('#' + layerID).find('area').each(function(){                
            var onclick_function = $(this).attr('onclick') ;
            var coords           = $(this).attr('coords');
                coords           = coords.split(' ').join('');
            var coords_array     = coords.split(',');
            console.log('>>> we have: ', 
                        onclick_function , 
                        coords,
                        coords_array);                            
            var rectleft = coords_array[0];
            var recttop = coords_array[1];
            var rectright = coords_array[2];
            var rectbottom = coords_array[3];

            // 
            // 3 - Match the RANGE of buttons with the coordinates 
            //
            if (x >= rectleft  && y >= recttop && 
                x <= rectright && y <= rectbottom){                  
              $(this).trigger('click');
            }
          });                  
        }

Answer 1

Method 1: When the CURSOR_CLICK event is triggered, iterate all the clickable buttons and check to which button the click is "related" to.

$buttons = $('.clickable-button');
var rect;

if (_label == rs.cursor.GestureType.CURSOR_CLICK) {

    $buttons.each(function(){ 

        rect = $(this).getBoundingClientRect();
        if (x >= rect.left && 
            x <= rect.right && 
            y >= rect.top && 
            y <= rect.bottom){
                        $(this).click();
            }
    });
}

Method 2: Create an array with all the buttons on the page and their cords. When the click event is being triggered, just compare the cords. Advantage - Less time is being spent in the loop.