現在 IE、Google Chrome、Firefox では dispatchEvent を使用しなくても click() だけで実行できるようです。元々、このメソッドは IE では古くから使用でき、特にリンクのクリックに対する代替として良く使われていたのですが、他のブラウザでは dispatchEvent を使う必要がありました( かなり昔です )
しかし、jQuery の click メソッドでは通常の click イベントは起きるのですが、a 要素の url を開く動作が実行されないという実情があります。ですから、その場合(URLを開きたい場合)だけは $("セレクタ").click() では無く、$("セレクタ").get(0).click() か、$("セレクタ")[0].click() とする必要があります
▼ 書き方の比較
<pre>
<a id="target20141106"
target="_blank"
href="https://www.google.co.jp/?gws_rd=ssl"
onclick='console.log("normalイベント発生")'
>www.google.co.jp</a>
▼ ◎ うまく行きます
<input type="button"
value="DOMでリンクをclick()"
onclick="document.getElementById('target20141106').click();">
▼ × うまく行きません
<input type="button"
value="jQueryでリンクをclick()"
onclick="$('#target20141106').click();">
▼ ◎ うまく行きます
<input type="button"
value="jQueryでリンクをclick()"
onclick="$('#target20141106').get(0).click();">
▼ ◎ うまく行きます
<input type="button"
value="jQueryでリンクをclick()"
onclick="$('#target20141106')[0].click();">
</pre>
www.google.co.jp ▼ ◎ うまく行きます ▼ × うまく行きません ▼ ◎ うまく行きます ▼ ◎ うまく行きます ▼ dispatchEvent を使用した記述 2011 年の最初の頃は、Firefox で制限があったのですが、今は皆 (IE, Chrome, Firefox) 正常に動作しているようです
<script type="text/javascript">
var flg = "ノーマル";
function clickAction(id) {
flg = "代替";
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
document.getElementById(id).click();
}
else {
var clickevent=document.createEvent("MouseEvents");
clickevent.initEvent("click", true, true);
document.getElementById(id).dispatchEvent(clickevent);
console.log("IE以外とIE11")
}
flg = "ノーマル";
}
</script>
<span id="target"
onclick='alert(flg)'
style='cursor:pointer'>JavaScriptクリック
</span>
<input type="button"
value="クリックのかわり"
onClick='clickAction("target")'>
<a id="link"
href="about:blank"
target="_blank">通常のリンク
</a>
<input type="button"
value="クリックのかわり"
onClick='clickAction("link")'>
(1)JavaScriptクリック (2) (3)通常のリンク (4)
(1) は onclick で alert を呼び出しています
(2) のボタンで (1) の click イベントを呼び出しています
(3) は href で新しいウインドウを開く普通のアンカーです
(4) のボタンで (3) のイベントを呼び出しています
▼ submit ボタンに対する click() テスト
jQuery で記述すると単純な click イベントは非常にシンプルになりましたが、アンカーのURL先へのページ移動は実行されませんでした
※ しかし、submit ボタンによる form の処理は実行されました
<script>
$(function(){
$("#submit_button").val("送信")
.click(function(){
$("#target2").click();
});
});
</script>
<span id="target2"
onclick='alert("ここを実行")'
style='cursor:pointer'>JavaScriptクリック
</span>
<form target="_blank">
<input id="submit_button"
type="submit"
name="submit">
</form>
<input type="button"
value="JavaScript 送信"
onclick='$("#submit_button").click()'>
JavaScriptクリック
● 一番上をクリックすると、JavaScript だけの実行
● 真ん中(submitボタン)をクリックすると、一番上をクリックした事にして、さらに通常の送信
一番下(ただのbutton)をクリックすると、真ん中をクリックした事になって、さらに連動して一番上もクリックした事になります
|
|
【JavaScript DOMの最新記事】
- IFRAME 内に外部の javascript を読み込んで画面を作成する / document.write での構築
- JavaScript : setTimeout の第一引数の正しい書き方。
- JavaScript : リンクから _blank で開いたページを JavaScript で閉じる場合の動作テスト
- JavaScript : ブラウザの表示を半透明で暗くする方法( scrollHeight で高さ決定 )
- JavaScript DOM と jQuery : エレメントの参照
- JavaScript : リンクのテキストの取得( Chrome、Firefox、IE / textContent、innerText、text、replace、jQuery )
- 動的に作成された IFRAME の キャラクタセットのブラウザ別の違い
- ローカル記憶域 : window.localStorage
- JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました
- JavaSctipt : ユーザ用(名前空間付き)イベント追加メソッドの作成
- JavaScript : 最後にクリックしたテキストフィールドを保存する
- JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く
