実際のアプリケーション開発では、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>
JavaScript:
次のようにコードをコピーします。
<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では問題なく、正常にフォームを送信できました。
しかし、実際のデザインでは、送信ボタンの見栄えを良くするために、ビルダーはタグを使用してボタンを処理し、背景画像を追加してボタンをシミュレートすることがよくありますが、私たちは依然として上記のアイデアを使用して、送信できるようにタグを追加します。 . フォーム、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 は問題ありませんでしたが、Chrome と Safari は正常に実行できませんでした。後でオンラインで調べたところ、ラベルにはボタンと同じ 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");
} それ以外 {
var e = document.createEvent('MouseEvent');
e.initEvent('クリック', false, false);
sub.dispatchEvent(e);
}
}
</script>
この時点で問題は解決しました。この問題は非常に単純ですが、みんなに共有するために投稿しました。
文法：
createEvent(イベントタイプ)
パラメータの説明
eventsType は、取得する Event オブジェクトのイベント モジュール名です。有効なイベント タイプのリストについては、「説明」セクションを参照してください。
戻り値
指定されたタイプの新しく作成された Event オブジェクトを返します。
投げる
実装が必要なイベント タイプをサポートしている場合、このメソッドはコード NOT_SUPPORTED_ERR の DOMException をスローします。
説明する
このメソッドは、eventType パラメーターで指定された新しいイベント タイプを作成します。このパラメータの値は、作成されるイベント インターフェイスの名前ではなく、そのインターフェイスを定義する DOM モジュールの名前であることに注意してください。
次の表に、eventType の有効な値と、各値によって作成されるイベント インターフェイスを示します。
パラメータイベントインターフェースの初期化メソッド
HTMLイベント HTMLEvent iniEvent()
マウスイベント MouseEvent iniMouseEvent()
UIEvent UIEvent iniUIEvent()
このメソッドを使用して Event オブジェクトを作成した後、上の表に示す初期化メソッドを使用してオブジェクトを初期化する必要があります。初期化メソッドの詳細については、「イベント オブジェクト リファレンス」を参照してください。
このメソッドは実際には Document インターフェイスによって定義されるのではなく、DocumentEvent インターフェイスによって定義されます。実装が Event モジュールをサポートしている場合、Document オブジェクトは DocumentEvent インターフェイスを実装し、このメソッドをサポートします。