在實際的應用開發中，我們會常常用到JS的模事件，比如說點擊事件，舉個簡單的例子，點擊表單外的“提交”按鈕來提交表單。上代碼吧。
html:
|
1
2
3
4
5
6
|
<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:
|
1
2
3
4
5
6
7
8
|
<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:
|
1
2
3
4
5
6
7
|
<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>
|
|
1
2
3
4
5
6
7
8
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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 接口並支持該方法。
參考資料：http://www.w3school.com.cn/xmldom/met_document_createevent.asp
本文鏈接：http://www.woiweb.net/js-simulate-click-event.html