如何模擬圖片按鈕點擊

我一直在做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

如何模擬圖片按鈕點擊

回答

相關問題