js模擬點(diǎn)擊事件實(shí)現(xiàn)代碼

2024-05-06 14:20:59

字體：大中小

供稿：網(wǎng)友

html:

代碼如下:
<h3>請(qǐng)單擊“提交”，測(cè)試提交按鈕的單擊事件也被觸發(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:

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

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

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

Html:
代碼如下:
<h3>請(qǐng)單擊“提交”，測(cè)試提交按鈕的單擊事件也被觸發(fā)了。</h3>
<button id="btn">提交</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>

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

運(yùn)行后，問(wèn)題出現(xiàn)了，IE、FF、Opera均OK，但Chrome和Safari不能正常運(yùn)行，后來(lái)網(wǎng)上搜索了下，發(fā)現(xiàn)a標(biāo)簽并不是和按鈕一樣有onclick()事件的，解決辦法是針對(duì) 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>

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

語(yǔ)法：
createEvent(eventType)

上一篇：關(guān)于使用 jBox 對(duì)話框的提交不能彈出問(wèn)題解決方法

下一篇：基于jquery自己寫tab滑動(dòng)門(通用版)

參數(shù)	描述
eventType	想獲取的 Event 對(duì)象的事件模塊名。關(guān)于有效的事件類型列表，請(qǐng)參閱”說(shuō)明”部分。

發(fā)表評(píng)論

共有條評(píng)論