Укажите координаты для click() для `<input type="image">`

Для этого вы можете использовать MouseEvent и установить его координаты x и y. Я также добавил функцию обнаружения движений мыши, чтобы показать, что она работает.

// detect the mouse movement
document.addEventListener('click', function (event){
console.info(event.clientX, event.clientY)
})
// 
function click(x, y, element){
var click = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false,
    "clientX":x,
    "clientY":y
});
element.dispatchEvent(click);
}
click(10, 20, document)

Кажется, что установка координат на <form> при отправке через <input type = "image"> происходит только для событий, инициированных пользователем, а не для синтетических событий. Однако можно имитировать поведение другими способами.

Когда форма отправляется через <input type = "image">, в запросе есть еще два поля запроса (или поля данных формы), x и y, представляющие координату щелчка. Но если вход имеет атрибут name, обе координаты имеют префикс значения атрибута name и .. Мы можем определить функцию для отправки формы с указанными координатами на основе заданного <input type = "image"> и вызвать ее. Функция в основном должна вставить два элемента <input type = "hidden"> с правильными свойствами name и value. При отправке формы эти два поля учитываются автоматически.

Вот демонстрация этой функции в действии.

const submitViaImage = (() => {
    const insertedElements = new WeakMap();
    
    return (button, x, y) => {
      if (button.form){
        if (insertedElements.has(button.form)){
          Array.from(insertedElements.get(button.form))
            .forEach((element) => element.remove());
        }
        else{
          insertedElements.set(button.form, new Set());
        }
        
        const prefix = (button.name
            ? `${button.name}.`
            : ""),
          hiddenX = Object.assign(document.createElement("input"), {
            name: `${prefix}x`,
            type: "hidden",
            value: x
          }),
          hiddenY = Object.assign(document.createElement("input"), {
            name: `${prefix}y`,
            type: "hidden",
            value: y
          });
        
        insertedElements.get(button.form)
          .add(hiddenX)
          .add(hiddenY);
        button.form.append(hiddenX, hiddenY);
        button.form.submit();
      }
    };
  })();


// Here, some event is bound to something that submits the form,
//   just demonstrating how to use the function above.

const target = document.querySelector("input[name='last']");

document.getElementById("somethingThatSubmitsTheForm")
  .addEventListener("click", () => submitViaImage(target, 40, 60));

<form>
  <label>Some other data: <input name = "someData" type = "text"></label>
  <div>
    Submit:
    <input name = "first" type = "image" src = "//picsum.photos/100?1">
    <input name = "last" type = "image" src = "//picsum.photos/100?2">
  </div>
</form>

<input id = "somethingThatSubmitsTheForm" type = "button" value = "Click here to submit the form via the second image at (40, 60).">

После нажатия любой из кнопок вы можете проверить iframe фрагмента стека, чтобы убедиться, что его внутренний documentURI действительно установлен на ожидаемый URL-адрес с полями someData, first.x или last.x, first.y или last.y.

К сожалению, форму действительно нужно отправлять напрямую через .submit(); на самом деле невозможно делегировать отправку через button.click(), потому что это попытается перезаписать координаты x и y, что приведет к чему-то вроде ?last.x=0&last.y=0&last.x=40&last.y=60. Однако button.click() предпочтительнее, если вы ожидаете, что отправка формы будет обрабатываться прослушивателем событий с вызовом preventDefault. Координаты x и y в этом случае не заданы, но среди прочего он правильно устанавливает submitter из SubmitEvent.

Функция закрывает WeakSet с именем insertedElements. Это используется для отслеживания элементов, добавленных к любому <form>, чтобы их можно было удалить перед добавлением новых. В противном случае к <form> добавляется все больше и больше скрытых входных данных, которые будут частью отправленных данных формы, содержащих устаревшие данные. Вставленные элементы исчезнут после перезагрузки страницы после отправки формы, но теоретически все еще возможно загрузить ответ на отправку в другом месте, поэтому удаление элементов по-прежнему важно.