jsアナログクリックイベント実現コード

3428 ワード

html数:
 
  

“ ”, 。







Javscript:
 
  
<br>var sub = document.getElementById("subbtn"); <br>var btn = document.getElementById("btn"); <br>// <br>btn.onclick = function() { <br>sub.click(); <br>} <br>
テストを経て、IE、FF、Chrome、Opera、Safariはすべて問題がなくて、正常にフォームを提出することができます.
しかし、実際の設計では、提出ボタンをよりよく見るために、ブリーデッカーはよくaタグで処理して、背景画像をアナログボタンにしています.私たちはやはり上の考え方で試してみます.aタグを追加して、フォームを提出してください.修正します.
Html:
 
  

“ ”, 。






アナログ ボタン

javascript:
 
  
<br>var sub = document.getElementById("subbtn"); <br>var btn = document.getElementById("btn"); <br>// <br>btn.onclick = function() { <br>sub.click(); <br>} <br>
運転後、問題が発生しました.IE、FF、Operaは全部OKです.しかし、ChromeとSafariは正常に動作しませんでした.ネットで検索したら、aタグはボタンと同じようにonclick()イベントがあるのではなく、解決方法はIEとFFに対して異なるロジックを作成することです.JSコードは以下の通りです.
javascript:
 
  
<br>var sub = document.getElementById("subbtn"); <br>var btn = document.getElementById("btn"); <br>// <br>btn.onclick = function() { <br>//sub.click(); <br>if (/msie/i.test(navigator.userAgent)) //IE <br>{ <br>sub.fireEvent("onclick"); <br>} else { <br>var e = document.createEvent('MouseEvent'); <br>e.initEvent('click', false, false); <br>sub.dispatchEvent(e); <br>} <br>} <br>
これで問題が解決され、この問題は簡単ですが、みんなに無視されやすいです.
構文: createEvent(eventType)
パラメータ
説明
eventType
イベントオブジェクトのイベントモジュール名を取得したいです.有効なイベントタイプのリストについては、「説明」の部分を参照してください.
戻り値
新しく作成したものを返します イベント オブジェクトは、指定された種類があります.
投げ出す
サポートが必要なイベントタイプを実現すると,この方法はコードをNOT_とする.SUPPORTED_ERRの DOMException 異常です
説明
この方法はパラメータによる新しいイベントタイプを作成します. eventType 指定します.このパラメータの値は、作成するイベントインターフェースの名前ではなく、そのインターフェースのDOMモジュールの名前を定義します.
下表に列記しました eventType の合法値と値ごとに作成されたイベントインターフェース:
パラメータ
イベントインターフェース
初期化の方法
HTM LEvensts
HTMLEvent
iniEvent()
Mouse Events
MouseEvent
ini Mouse Event()
UEvents
UEvent
iniUEvent()
この方法でEventオブジェクトを作成したら、上の表に示す初期化方法でオブジェクトを初期化しなければなりません.初期化方法の詳細については、 イベント オブジェクトの参照
この方法は実際にDcumentインターフェースによって定義されるのではなく、Dcument Eventインターフェースによって定義される.Eventモジュールをサポートすることが実現されると、DoccumentオブジェクトはDcument Eventインターフェースを実現し、この方法をサポートします.