js模擬點擊以提交表單為例兼容主流瀏覽器

更新時間：2013年11月29日 16:11:03 作者：

我們會常常用到JS的模事件，比如說點擊事件，舉個簡單的例子，點擊表單外的“提交”按鈕來提交表單，下面為大家介紹下具體的實現(xiàn)

在實際的應用開發(fā)中，我們會常常用到JS的模事件，但有時會遇到一些問題，比如說點擊事件，舉個簡單的例子，點擊表單外的“提交”按鈕來提交表單。上代碼吧。

Html:

 
<h3>請單擊“提交”，測試提交按鈕的單擊事件也被觸發(fā)了。</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('我已經(jīng)提交了');"/> 
</form> 

Javscript:

復制代碼代碼如下:

 
<script type="text/javascript"> 
var sub = document.getElementById("subbtn"); 
var btn = document.getElementById("btn"); 
//通用方法 
btn.onclick = function() { 
sub.click(); 
} 
</script> 

經(jīng)過測試，IE，F(xiàn)F，Chrome，Opera，Safari都沒有問題，均可正常提交表單。

但在實際的設(shè)計中，為了讓提交按鈕更好看，buildder經(jīng)常把它們用a標簽來處理，加個背景圖片來模擬按鈕，我們?nèi)匀挥蒙厦娴乃悸穪韲L試，增加一個a標簽，讓它來提交表單，我們僅修改html。

Html:

復制代碼代碼如下:

 
<h3>請單擊“提交”，測試提交按鈕的單擊事件也被觸發(fā)了。</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('我已經(jīng)提交了');"/> --> 
<a id="subbtn" href="javascript:;" onclick="alert('在此調(diào)用提交表單的方法')">模擬提交按鈕</a> 
</form> 

Javascript:

復制代碼代碼如下:

 
<script type="text/javascript"> 
var sub = document.getElementById("subbtn"); 
var btn = document.getElementById("btn"); 
//通用方法 
btn.onclick = function() { 
sub.click(); 
} 
</script> 

運行后，問題出現(xiàn)了，IE、FF、Opera均OK，但Chrome和Safari不能正常運行，后來網(wǎng)上搜索了下，發(fā)現(xiàn)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)

參數(shù)　　　描述

eventType　想獲取的 Event 對象的事件模塊名。關(guān)于有效的事件類型列表，請參閱”說明”部分。

返回值

返回新創(chuàng)建的 Event 對象，具有指定的類型。

拋出

如果實現(xiàn)支持需要的事件類型，該方法將拋出代碼為 NOT_SUPPORTED_ERR 的 DOMException 異常。

說明

該方法將創(chuàng)建一種新的事件類型，該類型由參數(shù) eventType 指定。注意，該參數(shù)的值不是要創(chuàng)建的事件接口的名稱，而是定義那個接口的 DOM 模塊的名稱。

下表列出了 eventType 的合法值和每個值創(chuàng)建的事件接口：

參數(shù)　　　　　　事件接口　　初始化方法
HTMLEvents　　HTMLEvent　iniEvent()
MouseEvents　　MouseEvent iniMouseEvent()
UIEvents　　　　UIEvent　　iniUIEvent()

用該方法創(chuàng)建了 Event 對象以后，必須用上表中所示的初始化方法初始化對象。關(guān)于初始化方法的詳細信息，請參閱 Event 對象參考。

該方法實際上不是由 Document 接口定義的，而是由 DocumentEvent 接口定義的。如果一個實現(xiàn)支持 Event 模塊，那么 Document 對象就會實現(xiàn) DocumentEvent 接口并支持該方法。

您可能感興趣的文章: