ondblclick/JavaScript

イベントハンドラのondblclickについて説明します。

ondblclickの使い方

 ondblclickは、ページや要素内でマウスがダブルクリックされた時に処理を実行出来ます。ダブルクリックとは、マウスが2回続けてクリックされる事です。連続でクリックしないと反応しません。

 以下は、例です。

【ondblclick利用例】
<div ondblclick="alert('テストです');">
ここをダブルクリックします。
</div>

 実行例は、以下の通りです。尚、分かり易いように枠を付けています。

ここをダブルクリックします。

 要素内でマウスをダブルクリックすると、アラートが表示されます。

フォームでの利用例

 フォーム内のボタンをダブルクリックした時に、処理を実行する事も出来ます。

【フォームでの利用例】
<form>
<button type="button" ondblclick="alert('テストです');">表示</button>
</form>

 実行例は、以下の通りです。

 「表示」ボタンをダブルクリックすると、アラートが表示されます。

画像での利用例

 ondblclickは<img>でも使えます。

【imgタグでの利用例】
<img src="11.png" alt="スペードA" ondblclick="alert('テストです');" />

 実行例は、以下の通りです。

スペードA

 画像をダブルクリックすると、アラートが表示されます。

 この他、<html>で使うとページのどこをダブルクリックしてもイベントに出来ます。例えば、背景(文字等が記述されていない範囲)をクリックしてもイベントになります。

サポート

・サポートするブラウザ

 以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

【サポートするブラウザ】
機種 ブラウザ サポート
パソコン Chrome
Safari
Firefox
Microsoft Edge
Internet Explorer
スマートフォン Chrome
Safari
Firefox

・サポートするタグ

 <br>や<iframe>等を除いた多くのタグでサポートされています。

  • このエントリーをはてなブックマークに追加