在實際的應用開發中,我們會常常用到JS的模事件,但有時會遇到一些問題,比如說點擊事件,舉個簡單的例子,點擊表單外的“提交”按鈕來提交表單。上代碼吧。
Html:
<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:
<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>請單擊“提交”,測試提交按鈕的單擊事件也被觸發了。</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不能正常運行,后來網上搜索了下,發現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 對象的事件模塊名。關于有效的事件類型列表,請參閱”說明”部分。
返回值
返回新創建的 Event 對象,具有指定的類型。
拋出
如果實現支持需要的事件類型,該方法將拋出代碼為 NOT_SUPPORTED_ERR 的 DOMException 異常。
說明
該方法將創建一種新的事件類型,該類型由參數 eventType 指定。注意,該參數的值不是要創建的事件接口的名稱,而是定義那個接口的 DOM 模塊的名稱。
下表列出了 eventType 的合法值和每個值創建的事件接口:
參數 事件接口 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
用該方法創建了 Event 對象以后,必須用上表中所示的初始化方法初始化對象。關于初始化方法的詳細信息,請參閱 Event 對象參考。
該方法實際上不是由 Document 接口定義的,而是由 DocumentEvent 接口定義的。如果一個實現支持 Event 模塊,那么 Document 對象就會實現 DocumentEvent 接口并支持該方法。