Как программно нажать кнопку в Javascript на основе координаты xy
По сути, я хочу наложить холст поверх некоторого HTML, но при этом иметь возможность щелкать элементы ниже, например, кнопку или ссылку.
Я могу получить координату xy щелчка на холсте. Есть ли способ программно вызвать нажатие кнопки ниже с координатой xy?
Отвечает ли это на ваш вопрос? получайте клики через html canvas
Я предполагаю, что это правда, однако в идеале я хотел бы динамически распространять щелчок, не переопределяя «кликабельную» область всякий раз, когда появляется новая кнопка или сдвиг кнопки
Затем, если вам не нужно обнаруживать события курсора на холсте, используйте предложенный пилчардом дубликат (canvas { pointer-events: none; } в CSS). В противном случае вам нужно будет получить положение кнопки и сравнить его с координатами щелчка x, y и нажать кнопку программно
Ответы 1
Попробуй это:
document.elementFromPoint(x, y).dispatchEvent(new MouseEvent("click", {bubbles: true}));
document.elementFromPoint(50, 50).dispatchEvent(new MouseEvent("click", {bubbles: true}));div{
height:100px;
width:100px;
background:red;
}<div onclick = "alert('clicked')">
</div>спасибо этому ответу и этой статье
Привет! спасибо за ответ, это было то, что я искал, я понимаю, что он вернул холст, который был сверху, вместо кнопки под холстом, есть ли способ это исправить?
Хорошо решено! Я использовал elementsFromPoint вместо elementFromPoint, он вернул список, единственная схематичная часть заключается в том, что я сделал это для доступа к элементу, который я ищу, в данном случае ко второму элементу.
Из любопытства: нужна ли вообще кнопка? Разве вы не можете просто выполнить функцию напрямую, когда на холсте щелкнули в определенных координатах?