ondblclick属性

Updated / Published

ondblclick属性はユーザが当該要素をマウスやノートパソコン等に付属しているトラックパッドなどのポインティングデバイス（pointing device）の左ボタンで続けて2回押した際（2回連続で左クリックを実行した時）に起動するスクリプトを指定するイベント属性（イベントハンドラ）です。左ボタンを2回連続で押す間隔は、システムのダブルクリックのスピード設定によります。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
必須
-
非推奨
-
属性値
スクリプト

ondblclick属性は、ポインティングデバイス操作ができない環境では無効です。そもそもダブルクリックのような複雑な操作をしなければならないコンテンツの作りは考えものですし、日本工業規格がウェブコンテンツのあり方を示したガイドラインであるJIS X 8341-3においてondblclick属性は対応するキーボードのイベントハンドラがないので、使うべきではないとされています。

イベント発生順

ondblclick属性と同じ左ボタンの2回連続押しの動作によりイベントを発生させる属性に、onclick属性と onmousedown属性, onmouseup属性があります。これらの属性を ondblclick属性と併せてひとつの要素に指定している場合、左ボタンを2回連続で押す動作を行うと、標準に準拠している Firefox, Opera, Chrome, Safari では onmousedown→onmouseup→onclick→onmousedown→onmouseup→ondblclick の順にイベントが発生します。Internet Explorer のみイベント発生順序が異なり、onmousedown→onmouseup→onclick→onmousedown→ondblclick→onmouseup の不規則な順でイベントが発生します。どの UA においても2回連続でボタンを押した時の2回目の onclick属性のイベントは無効になるようです。

  1. onmousedown属性
  2. onmouseup属性
  3. onclick属性
  4. onmousedown属性
  5. onmouseup属性（IEのみ：ondbliclick属性）
  6. ondblclick属性（IEのみ：onmouseup属性）

ondblclick属性を指定できる要素型

A
B
C
D
E
F
H
I
K
L
M
N
O
P
Q
R
S
T
U
V

ondblclick属性のサンプル

次のスクリプトでは、左ボタンの2回連続押しで、表の行の背景色を変更するイベントが発生します。そして、着色されている状態の行をポインティングデバイスの左・右いずれかのボタンを押すことで、組み合わせている onmousedown属性のイベントが発生し背景色がない状態に戻します。

<script type="text/javascript">
var normalColor = "transparent";
var selectedColor = " lightpink";
function dbcl(obj, row) {
obj.style.backgroundColor=selectedColor;
col[row] = 1; }
function onecl(obj, row) {
obj.style.backgroundColor=normalColor;
col[row] = 0; }
</script>
......
<table border="1">
<caption>名字ランキング</caption>
<tr><th>順位</th><th>氏名</th><th>世帯数</th></tr>
<tr ondblclick="dbcl(this,0)" onmousedown="onecl(this,0)">
<td>1</td><td>佐藤（さとう）</td><td>45x,xxx</td></tr>
<tr ondblclick="dbcl(this,1)" onmousedown="onecl(this,1)">
<td>2</td><td>鈴木（すずき）</td><td>40x,xxx</td></tr>
<tr ondblclick="dbcl(this,2)" onmousedown="onecl(this,2)">
<td>3</td><td>高橋（たかはし）</td><td>33x,xxx</td></tr>
<tr ondblclick="dbcl(this,3)" onmousedown="onecl(this,3)">
<td>4</td><td>田中（たなか）</td><td>31x,xxx</td></tr>
<tr ondblclick="dbcl(this,4)" onmousedown="onecl(this,4)">
<td>5</td><td>渡辺（わたなべ）</td><td>25x,xxx</td></tr>
</table>