如何通过 x 和 y 方向提交点击？

Question

我有一支遥控笔作为光标（硬件）。

通过 SDK 到 Javascript 的外部硬件我收到一个光标。 我在哪里得到 x、x、y、y 位置并单击命令。

但是，如何提交点击该位置？ （无论该位置有什么元素，我都需要提交对该位置的点击）

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();
                  }
*/
}

编辑：

        //
        // 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

方法一：当 CURSOR_CLICK 事件被触发时，迭代所有可点击的按钮，并检查点击与哪个按钮“相关”。

$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();
            }
    });
}

方法 2： 创建一个包含页面上所有按钮及其线的数组。 当点击事件被触发时，只需比较电线。 优势 - 在循环中花费的时间更少。