html:
復制代碼 代碼如下:
<h3>請單擊“提交”，測試提交按鈕的單擊事件也被觸發了。</h3>
<button id="btn">提交</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<input id="subbtn" type="submit" value="先別點擊此按鈕提交" onclick="alert('我已經提交了');"/>
</form>
Javscript:
復制代碼 代碼如下:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
sub.click();
}
</script>
經過測試，IE，FF，Chrome，Opera，Safari都沒有問題，均可正常提交表單。
但在實際的設計中，為了讓提交按鈕更好看，buildder經常把它們用a標簽來處理，加個背景圖片來模擬按鈕，我們仍然用上面的思路來嘗試，增加一個a標簽，讓它來提交表單，我們僅修改html。
Html:
復制代碼 代碼如下:
<h3>請單擊“提交”，測試提交按鈕的單擊事件也被觸發了。</h3>
<button id="btn">提交</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<!--<input id="subbtn" type="submit" value="先別點擊此按鈕提交" onclick="alert('我已經提交了');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('在此調用提交表單的方法')">模擬提交按鈕</a>
</form>
javascript:
復制代碼 代碼如下:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
sub.click();
}
</script>
運行後，問題出現了，IE、FF、Opera均OK，但Chrome和Safari不能正常運行，後來網上搜索了下，發現a標簽並不是和按鈕一樣有onclick()事件的，解決辦法是針對 IE 和 FF編寫不同的邏輯，JS代碼如下：
javascript:
復制代碼 代碼如下:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} else {
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
sub.dispatchEvent(e);
}
}
</script>
至此，問題解決，雖然這個問題很簡單，但很容易被大家忽略，貼出來和大家一起分享。
語法：
createEvent(eventType)
參數
描述
eventType
想獲取的 Event 對象的事件模塊名。關於有效的事件類型列表，請參閱”說明”部分。
返回值
返回新創建的 Event 對象，具有指定的類型。
拋出
如果實現支持需要的事件類型，該方法將拋出代碼為 NOT_SUPPORTED_ERR 的 DOMException 異常。
說明
該方法將創建一種新的事件類型，該類型由參數 eventType 指定。注意，該參數的值不是要創建的事件接口的名稱，而是定義那個接口的 DOM 模塊的名稱。
下表列出了 eventType 的合法值和每個值創建的事件接口：
參數
事件接口
初始化方法
HTMLEvents
HTMLEvent
iniEvent()
MouseEvents
MouseEvent
iniMouseEvent()
UIEvents
UIEvent
iniUIEvent()
用該方法創建了 Event 對象以後，必須用上表中所示的初始化方法初始化對象。關於初始化方法的詳細信息，請參閱 Event 對象參考。
該方法實際上不是由 Document 接口定義的，而是由 DocumentEvent 接口定義的。如果一個實現支持 Event 模塊，那麼 Document 對象就會實現 DocumentEvent 接口並支持該方法。