dblclickの使い方
dblclickは、ページや要素内でマウスがダブルクリックされた時に処理を実行出来ます。ダブルクリックとは、マウスが2回続けてクリックされる事です。連続でクリックしないと反応しません。
以下は、例です。
【dblclick利用例】
<div id="test-dblclick1">
ここをダブルクリックします。
</div>
<script>
var x1 = document.getElementById("test-dblclick1");
x1.addEventListener("dblclick", function(){alert("テストです");}, false);
</script>
赤字部分でdblclickイベントを登録しています。
実行例は、以下の通りです。尚、分かり易いように枠を付けています。
要素内でマウスをダブルクリックすると、アラートが表示されます。
フォームでの利用例
フォーム内のボタンをダブルクリックした時に、処理を実行する事も出来ます。
【フォームでの利用例】
<form>
<button type="button" id="test-dblclick2">表示</button>
</form>
<script>
var x2 = document.getElementById("test-dblclick2");
x2.addEventListener("dblclick", function(){alert("テストです");}, false);
</script>
実行例は、以下の通りです。
「表示」ボタンをダブルクリックすると、アラートが表示されます。
画像での利用例
dblclickは<img>でも使えます。
【imgタグでの利用例】
<img src="11.png" alt="スペードA" id="test-dblclick3" />
<script>
var x3 = document.getElementById("test-dblclick3");
x3.addEventListener("dblclick", function(){alert("テストです");}, false);
</script>
実行例は、以下の通りです。
画像をダブルクリックすると、アラートが表示されます。
この他、<html>で使うとページのどこをダブルクリックしてもイベントに出来ます。例えば、背景(文字等が記述されていない範囲)をクリックしてもイベントになります。
サポート
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
【サポートするブラウザ】
機種 |
ブラウザ |
サポート |
パソコン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
Microsoft Edge |
〇 |
Internet Explorer |
v9以上 |
スマートフォン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
・サポートするタグ
<br>等を除いた多くのタグでサポートされています。