如何模拟图片按钮点击

我一直在做web开发很长一段时间，但我最近才发现<input type="image">标签的存在。如何模拟图片按钮点击

我有一个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();

我会立即同意有可能1000更好的方法来做到这一点，但它在这种情况下工作。它完美，但我有点停留在提交以下表格

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

我已经尝试通过调用点击（）输入图像对象上做相同的，但似乎并没有工作。有什么建议么。使用jQuery很好，但我对干净的JS版本特别感兴趣。

来源

2012-01-03 TFennis

我实际上发现了一个类似的问题，但答案是指向一个不存在的资源的链接。 – TFennis 2012-01-03 11:24:26

为每个图像指定名称，并尝试调用$("#<image_id>").click();，如果您使用的是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 or image2.x=0&image2.y=0

来源

2012-01-03 13:07:25 Diode

似乎有效，但为什么不使用jQuery则无法正常工作？ – TFennis 2012-01-03 15:05:30

它也可以在没有jQuery的情况下工作。请看这个：http://fiddle.jshell.net/diode/yqMW9/5/show。 – Diode 2012-01-03 16:29:39

你可以使用JQuery Submit

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

针对以下，这将只需提交表格和所有的数据。如果你想提交Form1然后提交。

也没有明显的原因，为什么这将在1.7失败 - 是否有其他的Javascript代码？

来源

2012-01-03 11:25:36 LiamB

这不会提交服务器所需的x和y坐标，以确定哪个图像已被点击！ – TFennis 2012-01-03 11:44:18

附注：如果我包含jQuery 1.7.1，但这个小代码不起作用，但确实适用于1.3.2 – TFennis 2012-01-03 11:44:47

这里是一个轻量级的解决方案要比使用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>

来源

2012-01-03 13:18:25 synthesizerpatel

如何模拟图片按钮点击

回答

相关问题