Javascript 如何模拟图像按钮单击

我做web开发已经有一段时间了，但直到最近我才发现

标签的存在

我有一个greasemonkey脚本，可以在网页上自动提交以下表单

<form id="form1">
      <input id="radio1" type="radio" /> 
      <input id="radio2" type="radio" /> 
      <input id="buttn1" type="submit" />
</form>

我使用下面的脚本提交此表单

var form = document.getElementById('form1');

for(var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    if(element.id == 'radio2') {
       element.setAttribute("checked", "checked");        
    }
    if(element.id == 'buttn1') {
        var button = element;
    }
}
button.click();

var form=document.getElementById（'form1'）；
对于（var i=0；i

我会立即同意可能有1000种更好的方法来做到这一点，但它在这种情况下起作用。它工作得很好，但我还是坚持提交下面的表格

<form id="form2">
    <input type="image" id="img1" src="img1.png" />
    <input type="image" id="img2" src="img2.png" />
</form>

我也尝试过通过调用输入图像对象上的click（）来执行相同的操作，但这似乎不起作用。任何建议。使用jQuery很好，但我对干净的JS版本特别感兴趣。

您可以使用

作为对以下内容的回应，我们只需提交表格和所有数据。如果你想提交Form1，那么就提交它

在1.7中也没有明显的失败原因-是否有其他Javascript代码？

您可以使用

作为对以下内容的回应，我们只需提交表格和所有数据。如果你想提交Form1，那么就提交它

---

在1.7中也没有明显的失败原因-是否有其他Javascript代码？

为每个图像命名，然后尝试调用

$（“#”）。单击（），如果您使用的是jQuery

<form id="form2" method="get">
    <input type="image" id="img1" src="https://encrypted.google.com/images/logos/ssl_logo.png" name="image1"/>
    <input type="image" id="img2" src="http://www.w3schools.com/images/w3schoolslogo.gif" name="image2"/>
</form>



服务器将接收参数，如
image1.x=0&image1.y=0或image2.x=0&image2.y=0
为每个图像命名，并尝试调用
$（“#”）。单击（），如果您使用的是jQuery

<form id="form2" method="get">
    <input type="image" id="img1" src="https://encrypted.google.com/images/logos/ssl_logo.png" name="image1"/>
    <input type="image" id="img2" src="http://www.w3schools.com/images/w3schoolslogo.gif" name="image2"/>
</form>



服务器将接收诸如
image1.x=0&image1.y=0或image2.x=0&image2.y=0之类的参数

添加名为“单击”的新原型

HTMLElement.prototype.click = function() {
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
}

然后利用它

<form>
    <input id="some_id" type="checkbox" name="foo"></input>
</form>
<script>
   document.getElementById('some_id').click();
</script>


document.getElementById（'some_id'）。单击（）；
这里有一个比使用jquery更轻松的解决方案：

添加名为“单击”的新原型

HTMLElement.prototype.click = function() {
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
}

然后利用它

<form>
    <input id="some_id" type="checkbox" name="foo"></input>
</form>
<script>
   document.getElementById('some_id').click();
</script>


document.getElementById（'some_id'）。单击（）；
我实际发现了一个类似的问题，但答案是指向不存在的资源的链接。我实际发现了一个类似的问题，但答案是指向不存在的资源的链接。这不会提交服务器所需的x和y坐标，以确定单击了哪个图像！另一方面：如果我包含jQuery 1.7.1，那么这段代码就不起作用，但它适用于1.3.2。这不会提交服务器所需的x和y坐标，以确定单击了哪个图像！另一方面：如果我包含jQuery 1.7.1，那么这段代码就不起作用，但是它确实适用于1.3.2，如果没有jQuery，它也会起作用。请参阅：。它也可以在没有jQuery的情况下工作。请看这个：。