SQLの窓

2014年11月06日


JavaScript でクリックの代替( 古くは dispatchEvent で呼び出し )、現在は jQuery の click() ではリンクの URL を開く事はでき無いので、$("セレクタ")[0].click() 等を併用します。

現在 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)をクリックすると、真ん中をクリックした事になって、さらに連動して一番上もクリックした事になります


posted by lightbox at 2014-11-06 15:06 | JavaScript DOM | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり