js模擬點擊事件實現代碼
更新時間：2012年11月06日 17:33:33 作者：
在實際的應用開發(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('我已經提交了');"/>
</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>請單擊“提交”，測試提交按鈕的單擊事件也被觸發(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('我已經提交了');"/> -->
<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不能正常運行，后來網上搜索了下，發(fā)現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>
至此，問題解決，雖然這個問題很簡單，但很容易被大家忽略，貼出來和大家一起分享。
復制代碼 代碼如下:
<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('我已經提交了');"/>
</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>請單擊“提交”，測試提交按鈕的單擊事件也被觸發(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('我已經提交了');"/> -->
<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不能正常運行，后來網上搜索了下，發(fā)現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 對象的事件模塊名。關于有效的事件類型列表，請參閱”說明”部分。 |
返回值
返回新創(chuàng)建的 Event 對象，具有指定的類型。
拋出
如果實現支持需要的事件類型，該方法將拋出代碼為 NOT_SUPPORTED_ERR 的 DOMException 異常。
說明
該方法將創(chuàng)建一種新的事件類型，該類型由參數 eventType 指定。注意，該參數的值不是要創(chuàng)建的事件接口的名稱，而是定義那個接口的 DOM 模塊的名稱。
下表列出了 eventType 的合法值和每個值創(chuàng)建的事件接口：
| 參數 | 事件接口 | 初始化方法 |
| HTMLEvents | HTMLEvent | iniEvent() |
| MouseEvents | MouseEvent | iniMouseEvent() |
| UIEvents | UIEvent | iniUIEvent() |
用該方法創(chuàng)建了 Event 對象以后，必須用上表中所示的初始化方法初始化對象。關于初始化方法的詳細信息，請參閱 Event 對象參考。
該方法實際上不是由 Document 接口定義的，而是由 DocumentEvent 接口定義的。如果一個實現支持 Event 模塊，那么 Document 對象就會實現 DocumentEvent 接口并支持該方法。
相關文章
這篇文章主要介紹了JavaScript實現滑動選擇日期功能，基于sui-mobile的移動端實現，感興趣的小伙伴們可以參考一下2016-06-06
本文主要介紹了js自己實現一個大文件切片上傳+斷點續(xù)傳的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
IE有許多好用的方法，后來都被其他瀏覽器抄襲了，比如這個contains方法。如果A元素包含B元素，則返回true，否則false。唯一不支持這個方法的是IE的死對頭firefox。2011-01-01
下面小編就為大家?guī)硪黄猨s基礎之DOM中document對象的常用屬性方法詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了鼠標拖拽移動子窗體的JS實現,需要的朋友可以參考下2014-02-02
.net MVC+Bootstrap下使用localResizeIMG上傳圖片
這篇文章主要為大家詳細介紹了.net MVC和Bootstrap下使用 localResizeIMG上傳圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了js日歷相關函數的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了fckeditor粘貼Word時彈出窗口取消的方法,是應用fckeditor時非常實用的技巧,需要的朋友可以參考下2014-10-10
npm install報錯無法創(chuàng)建packge.json文件的解決辦法
當你在運行 npm install 時遇到錯誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個 package.json 文件,只創(chuàng)建了一個package-lock.json文件,本文給大家介紹詳細的解決辦法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了JS實現Fisheye效果動感放大菜單代碼,涉及JavaScript事假監(jiān)聽機制及定時函數等相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10