如何模拟图像按钮点击

How to simulate an image-button click

本文关键字：图像 按钮 模拟 何模拟      更新时间：2023-09-26

我做web开发已经有一段时间了，但我最近才发现<input type="image">标签的存在。

我有一个油腔滑调的脚本，可以自动在网页上提交以下表格。

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

我会立即同意，可能有1000种更好的方法可以做到这一点，但在这种情况下它是有效的。它工作得很好，但我有点拘泥于提交以下表格

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

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

这里有一个比使用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>

如果使用jQuery，请为每个图像指定名称，并尝试调用$("#<image_id>").click();。

<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 or image2.x=0&image2.y=0 等参数

您可以使用JQuery Submit

$('#Form2').submit();

作为对以下内容的回应，这将简单地提交表格和所有数据。如果你想提交Form1，那么就提交它。

这在1.7中也没有明显的失败原因——还有其他Javascript代码吗？

相关文章：