ywork2020.com

Title

要素にマウスアップイベントを登録する

目次 (INDEX)

mouseupとは

ここで説明する mouseup とは次の語句からなるjQueryのメソッドです。
mouse
読み: マウス
意味: 鼠、ここではパソコンの入力位置を指示するポインティングデバイスのこと。
up
読み: アップ
意味: 上、上げる、ここではマウスのボタンを離すこと。

目次に戻る

mouseupメソッドの概要

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

マウスアップはマウスのボタンが押された後に「離された時点」で発生するイベントであり、クリックとは少し異なります。 クリックイベントはマウスのボタンが押され、次に離すという一連の動作が完了した時点で発生します。

目次に戻る

構文

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

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

目次に戻る

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

ここでは、シンプルに div 要素にマウスアップイベントをバインドしています。 このメソッドの引き合いに mousedown() (マウスダウン) のイベントもコードに含んでいますので、参考にしてください。

実際の動作はマウスカーソルを要素に合わせ、マウスボタンを押してから「離す」ことで確認してください。

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

サンプルコード: CSS
<style>
	div{
		position: relative;
		background-color: ##cyan;
		border: thin solid currentColor;
		padding: 1em;
		text-align: center;
		height: 100px;
		width: 100px;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>mousedown<br>&<br>mouseup</div>
	<script>...</script>
</body>
  • 06: div (div 要素です。この要素にマウスアップイベントをバインドします。)
サンプルコード: script
<script>
	$("div").mousedown(function(){
		$(this).animate({"height":"140px", "width":"140px", "left":"-20px", "top":"-20px"}, 300);
	});
	$("div").mouseup(function(){
		$(this).animate({"height":"100px", "width":"100px", "left":"0px", "top":"0px"}, 200);
	});
</script>
  • 05-07: $("div").mouseup(function(){関数の処理}) (div 要素にマウスアップイベントをバインドしています。)
  • 06: animate() (このメソッドに関してはリンクを参照してください。補足ですが、ここでの this は div のことを表しています。)
実行結果:
mousedown
&
mouseup

目次に戻る