javascript - 为 `<input type="图像指定 click() 的坐标">`

Question

单击 this MDN example page 上的彩色框时, URL 显示点击的坐标。

使用 document.querySelector("input").click() 时, URL 显示坐标 x=0&y=0 .

我想使用控制台或用户脚本以编程方式单击按钮，以便 URL 显示我指定的坐标。

我尝试过的:

document.querySelector("input").dispatchEvent(new MouseEvent("click", {
  x: 55, // And also `offsetX` and `clientX`.
  y: 55 
}));

关于 MouseEvent 的文档请注意，这些实际上并没有移动光标，这很好。

我试着放一个 <div>在它上面，让点击通过。

const newdiv = document.createElement("div");

newdiv.style.position = "fixed";
newdiv.style.height = "1px";
newdiv.style.width = "1px";
newdiv.style.top = "55px";
newdiv.style.left = "55px";
newdiv.style.pointerEvents = "none";

document.querySelector("div").prepend(newdiv);
newdiv.click();

这适用于手动点击，但 .click()什么都不做(因为它是 sibling ？)。 document.querySelector("input").prepend(newdiv);会冒泡，但它仍然是 (0, 0)。

如何点击坐标？

我已经尝试过建议问题的答案 How to simulate a click by using x,y coordinates in JavaScript?在问这个问题之前(这是我发现的第一个谷歌结果之一)。这个问题不是重复的，因为标记的答案首先获取元素，然后点击它:

document.elementFromPoint(x, y).click();

完全一样

document.querySelector("input").click();

评论表明这是不可能的，因为它可能会让用户点击广告。真的做不到吗？

其他解决方案“单击”页面/元素，但不提交表单(URL 不会更改以显示单击按钮的位置)。

Answer 1

似乎在<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).">

单击任何按钮后，您可以检查 Stack Snippet 的 iframe 以验证其内部 documentURI确实设置为带有 someData 的预期 URL , first.x或 last.x , first.y或 last.y字段。

不幸的是，表单确实需要通过.submit()直接提交。 ;通过 button.click() 委托(delegate)提交是不可能的因为这将尝试覆盖 x 和 y 坐标，导致类似 ?last.x=0&last.y=0&last.x=40&last.y=60 的结果.然而，button.click()当您希望表单提交由带有 preventDefault 的事件监听器处理时，首选叫。在这种情况下未设置 x 和 y 坐标，但它正确设置了 submitter的 SubmitEvent除其他事项外。

函数closes over一个 WeakSet 称为 insertedElements .这用于跟踪添加到任何 <form> 的元素。因此可以在添加新的之前删除它们。否则，越来越多的隐藏输入被添加到 <form> s 这将是提交的表单数据的一部分，包含过时的数据。一旦表单提交后页面重新加载，插入的元素就会消失，但理论上仍然可以在其他地方加载提交响应，这就是删除元素仍然很重要的原因。