快捷導(dǎo)航

js模擬點(diǎn)擊以提交表單為例兼容主流瀏覽器

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

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

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

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="先別點(diǎn)擊此按鈕提交" onclick="alert('我已經(jīng)提交了');"/> 
</form> 

Javscript:

復(fù)制代碼代碼如下:

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

Html:

復(fù)制代碼代碼如下:

 
<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="先別點(diǎn)擊此按鈕提交" onclick="alert('我已經(jīng)提交了');"/> --> 
<a id="subbtn" href="javascript:;" onclick="alert('在此調(diào)用提交表單的方法')">模擬提交按鈕</a> 
</form> 

Javascript:

復(fù)制代碼代碼如下:

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

運(yùn)行后，問題出現(xiàn)了，IE、FF、Opera均OK，但Chrome和Safari不能正常運(yùn)行，后來網(wǎng)上搜索了下，發(fā)現(xiàn)a標(biāo)簽并不是和按鈕一樣有onclick()事件的，解決辦法是針對 IE 和 FF編寫不同的邏輯，JS代碼如下：
javascript:

復(fù)制代碼代碼如下:

 
<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> 

至此，問題解決，雖然這個(gè)問題很簡單，但很容易被大家忽略，貼出來和大家一起分享。

語法：

createEvent(eventType)

參數(shù)　　　描述

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

返回值

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

拋出

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

說明

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

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

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

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

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

您可能感興趣的文章: