ywork2020.com

Title

要素にダブルクリックイベントを登録する

目次 (INDEX)

dblclickとは

ここで説明する dblclick とは次の語句からなるjQueryのメソッドです。
double
読み: ダブル
意味: 二重、2倍
click
読み: クリック
意味: マウスのボタンを押す操作

目次に戻る

dblclickメソッドの概要

このメソッドは、セレクタに該当する既存要素にダブルクリックイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているダブルクリックイベントを呼び出します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

Selector.dblclick(Handler(EventObject));
Selector.dblclick([EventData], Handler(EventObject));
Selector.dblclick();
  • 01: ダブルクリックイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているダブルクリックイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

ここでは、シンプルに div 要素にダブルクリックイベントをバインドしています。 また、その下にあるボタンをクリックすることでバインドしてあるダブルクリックイベントを呼び出します。 もちろん、div 要素をダブルクリックしても同じ関数が呼び出されます。

構文の全ての記法の理解には、 click() のページを参照してください。

サンプルコード: CSS
<style>
	.clsGreen{
		background-color: ##green;
	}
	div{
		background-color: ##yellow;
		border: thin solid currentColor;
		height: 100px;
		width: 100px;
	}
</style>
  • 03: background-color (class属性が clsGreen の背景色は緑色です。)
  • 06: background-color (class属性無しの div の背景色は黄色です。)
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div class ="clsGreen"></div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 06: div (class="clsGreen" の要素です。この要素にダブルクリックイベントをバインドします。
  • 07: button (id="idButton" の要素です。ボタンをクリックすると前行のダブルクリックイベントを呼び出します。
サンプルコード: script
<script>
	$("div").dblclick(function(){
		$(this).toggleClass("clsGreen");
	});
	$("#idButton").click(function(){
		$("div").dblclick();
	});
</script>
  • 02-04: $("div").dblclick(function(){関数の処理}) (div 要素にダブルクリックイベントをバインドしています。)
  • 03: toggleClass() (このメソッドに関してはリンクを参照してください。)
  • 05-07: $("#idButton").click(function(){関数の処理}) (div 要素にクリックイベントをバインドしています。)
  • 06: $("div").dblclick() (既に div 要素にバインドされたダブルクリックイベントを呼び出します。)
実行結果:

目次に戻る