HTML の ondblclick 属性

HTML タグの ondblclick 属性には、その要素がマウスでダブルクリックされたときに実行する JavaScript を記述する。

HTML

HTMLでダブルクリックのイベントハンドラを指定する。

<tag ondblclick="javascript">

ondblclick属性で関数を呼び出す場合、第1引数にイベント・オブジェクトを渡すことができる。

<tag ondblclick="func(arguments[0])">

ondblclick属性で関数を呼び出す場合、第2引数にエレメント・オブジェクトを渡すことができる。

<tag ondblclick="func(arguments[0], this)">

使用例

次にondblclick属性の使用例を示します。

<button id="btn1" ondblclick="onDblclick(arguments[0], this)">
  ダブルクリック
</button>
<table>
  <tr>
    <th>プロパティ<th>
    <th>値<th>
  </tr>
  <tr>
    <td>screenX<td>
    <td id="sx"><td>
  </tr>
  <tr>
    <td>screenY<td>
    <td id="sy"><td>
  </tr>
  <tr>
    <td>clientX<td>
    <td id="cx"><td>
  </tr>
  <tr>
    <td>clientY<td>
    <td id="cy"><td>
  </tr>
  <tr>
    <td>ctrlKey<td>
    <td id="ck"><td>
  </tr>
  <tr>
    <td>shiftKey<td>
    <td id="sk"><td>
  </tr>
  <tr>
    <td>altKey<td>
    <td id="ak"><td>
  </tr>
  <tr>
    <td>metaKey<td>
    <td id="mk"><td>
  </tr>
</table>
<script>
  function onDblclick(event, element) {
    document.getElementById('sx').innerHTML = event.screenX
    document.getElementById('sy').innerHTML = event.screenY
    document.getElementById('cx').innerHTML = event.clientX
    document.getElementById('cy').innerHTML = event.clientY
    document.getElementById('ck').innerHTML = event.ctrlKey
    document.getElementById('sk').innerHTML = event.shiftKey
    document.getElementById('ak').innerHTML = event.altKey
    document.getElementById('mk').innerHTML = event.metaKey
    document.getElementById('id').innerHTML = element.id
  }
</script>

次にondblclick属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。

上記のボタンをダブルクリックすると、イベントのプロパティを表示する。

イベント
プロパティ	値
screenX
screenY
clientX
clientY
ctrlKey
shiftKey
altKey
metaKey

上記のボタンをダブルクリックすると、要素のプロパティを表示する。

要素
プロパティ	値
id

要素

次に示すイベント・ハンドラ・コンテンツ属性は、任意のHTML要素に指定することができる。

バブリング

dblclickイベントはバブリング（下位の要素から上位の要素へ伝播）する。

HTMLが次に示す構造である場合、input要素で発生したdblclickイベントは、fieldset、form、body及びhtml要素へと伝播していく。

html
- body
  - form
    - fieldset
      - input

もしfieldset、form、body及びhtml要素にondblclick属性を指定した場合、それらのJavaScriptも実行される。

イベントのキャンセル

dblclick イベントはキャンセル可能である。dblclick イベントをキャンセルすると、テキスト選択等のデフォルト動作が行われなくなる。

インタフェース

dblclickイベントはMouseEventインタフェースを実装している。

MouseEventインタフェースは次に示すプロパティを持つ。

screenX: スクリーン座標系の原点を基準とした、イベント発生時の水平座標
screenY: スクリーン座標系の原点を基準とした、イベント発生時の垂直座標
clientX: イベントが発生した水平座標を、そのイベントに関連付けられたビューポートに対して相対的に示す。
clientY: イベントと関連付けられたビューポートを基準とした、イベントが発生した垂直座標
ctrlKey: Control (コントロール) キー修飾子がアクティブであった場合、true を返す。
shiftKey: シフト（Shift）キー修飾子が有効であった場合、true を返す。
altKey: Alt（代替）キー（または "Option"）修飾子が有効であった場合、true を返す。
metaKey: メタ（Meta）キー修飾子が有効であった場合、true を返す
button: マウスボタンの押下や離脱によるマウスイベントにおいて、どのポインタデバイスのボタンが状態を変化させたかを示すために button を使用しなければならない。
buttons: 任意のマウスイベントにおいて、現在押されているマウスのボタンの組み合わせをビットマスクで表現し、ボタンを使用する必要がある。
relatedTarget: イベントの種類に応じて、UI イベントに関連する二次的な EventTarget を識別するために使用される。

JavaScript

JavaScriptでダブルクリックのイベントハンドラを指定する。

object.ondblclick = function(){ script };

object.addEventListener("dblclick", script);

jQuery

jQueryでダブルクリックのイベントハンドラを指定する。

window.jQuery(expr).on("dblclick", function([event]){ script });

jQuery(expr).on("dblclick", function([event]){ script });

$(expr).on("dblclick", function([event]){ script });

イベントリスナー

ondblclick属性を使わずに、イベントリスナーを使ってイベント処理を行うこともできます。

<button type="button" id="btn">
  Button
</button>
<p>
  Event: <span id="evnt"></span>
</p>
<script>
  function setup(e) {
    e.addEventListener("click", function(){
      document.getElementById("evnt").innerHTML = "click";
    });
    e.addEventListener("dblclick", function(){
      document.getElementById("evnt").innerHTML = "dblclick";
    });
  }
  setup(document.getElementById("btn"));
</script>

Event: