欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2012年11月06日 17:33:33   作者:  
在實際的應(yīng)用開發(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 接口并支持該方法。

相關(guān)文章

  • 讀懂CommonJS的模塊加載

    讀懂CommonJS的模塊加載

    這篇文章主要介紹了CommonJS的模塊加載,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • JavaScript基礎(chǔ)入門之錯誤捕獲機制

    JavaScript基礎(chǔ)入門之錯誤捕獲機制

    初級開發(fā)人員往往很少使用js的拋出和捕獲異常,但拋出和捕獲異常往往是非常必要的,這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)入門之錯誤捕獲機制的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • jquery實現(xiàn)簡單的遮罩層

    jquery實現(xiàn)簡單的遮罩層

    這篇文章主要介紹了jquery實現(xiàn)簡單的遮罩層相關(guān)代碼,內(nèi)容很豐富,教大家實現(xiàn)遮罩層效果,感興趣的小伙伴們可以參考一下
    2016-01-01
  • js實現(xiàn)飛機大戰(zhàn)小游戲

    js實現(xiàn)飛機大戰(zhàn)小游戲

    這篇文章主要為大家詳細介紹了js實現(xiàn)飛機大戰(zhàn)小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記!

    vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記!

    以目前的vscode版本來說,作者并沒有開放訪問本地媒體權(quán)限,所以插件市場里面的所有語音相關(guān)插件也并沒有直接獲取vscode的媒體權(quán)限,這篇文章主要介紹了vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記!,需要的朋友可以參考下
    2023-05-05
  • 微信小程序使用擴展組件庫WeUI的入門教程

    微信小程序使用擴展組件庫WeUI的入門教程

    WeUI是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫,由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計,令用戶的使用感知更加統(tǒng)一,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用擴展組件庫WeUI的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • js實現(xiàn)漂浮回頂部按鈕實例

    js實現(xiàn)漂浮回頂部按鈕實例

    這篇文章主要介紹了js實現(xiàn)漂浮回頂部按鈕的方法,實例分析了javascript實現(xiàn)返回頂部功能的樣式與動態(tài)實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
    2015-05-05
  • select每選擇一個option選項減少對應(yīng)的option實現(xiàn)方法

    select每選擇一個option選項減少對應(yīng)的option實現(xiàn)方法

    這篇文章主要為大家介紹了select每選擇一個option選項減少對應(yīng)的option實現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-12-12
  • 使用JavaScript判斷圖片是否加載完成的三種實現(xiàn)方式

    使用JavaScript判斷圖片是否加載完成的三種實現(xiàn)方式

    有時需要獲取圖片的尺寸,這需要在圖片加載完成以后才可以,本文有三個不錯的實現(xiàn)方式在此與大家分享下
    2014-05-05
  • 用JS中split方法實現(xiàn)彩色文字背景效果實例

    用JS中split方法實現(xiàn)彩色文字背景效果實例

    這篇文章介紹的是利用Javascript中的split方法來實現(xiàn)彩色文字背景效果,實現(xiàn)后的效果很好,有需要的可以參考借鑒。
    2016-08-08

最新評論