ondblclick

イベントハンドラのondblclickについて、サンプルコードを示しながら使い方を説明しています。

ondblclickの基本的な使い方

イベントハンドラのondblclickは、ページや要素内でマウスがダブルクリックされた時に処理を実行できます。ダブルクリックとは、マウスが2回続けてクリックされることです。連続でクリックしないと反応しません。

以下は、利用例です。

【ondblclick利用例】

<div id="test-dblclick">
ここをダブルクリックします。
</div>

<script>
const x = document.querySelector("#test-dblclick");
x.ondblclick = function(){alert("テストです");};
</script>

赤字部分でdblclickイベントを登録しています。

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

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

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

フォームでの利用例

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

【フォームでの利用例】

<form>
<button type="button" id="test-dblclick">表示</button>
</form>

<script>
const x = document.querySelector("#test-dblclick");
x.ondblclick = function(){alert("テストです");};
</script>

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

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

画像での利用例

ondblclickは、img要素でも使えます。

【img要素での利用例】

<img src="image.png" alt="画像" id="test-dblclick">

<script>
const x = document.querySelector("#test-dblclick");
x.ondblclick = function(){alert("テストです");};
</script>

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

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

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

HTMLの属性として記述する(非推奨)

ondblclickは、HTMLの属性としても記述できます。

【ondblclickをHTML属性で記述する例】

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

divタグで、ondblclick属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
ondblclick	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
ondblclick	〇	×	〇	×	〇	×

〇: サポート
△: 制限あり
×: 未サポート
？: 不明

IE: Internet Explorer
Ed: Edge
Fx: Firefox
Ch: Chrome
Sa: Safari
Op: Opera
An: Android Browser
Sm: Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

「イベントハンドラ一覧」に戻る