mousedownとは
- ここで説明する mousedown とは次の語句からなるjQueryのメソッドです。
- mouse
- 読み: マウス
意味: 鼠、ここではパソコンの入力位置を指示するポインティングデバイスのこと。 - down
- 読み: ダウン
意味: 下、ここではマウスのボタンを押すこと。
mousedownメソッドの概要
このメソッドは、セレクタに該当する既存要素にマウスダウンイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているマウスダウンイベントを呼び出します。
マウスダウンはマウスのボタンが押された時点で発生するイベントであり、クリックとは少し異なります。 クリックイベントはマウスのボタンが押され、次に離すという一連の動作が完了した時点で発生します。
構文
サンプルを見る前に構文を確認しておきます。
Selector.mousedown(Handler(EventObject));
Selector.mousedown([EventData], Handler(EventObject));
Selector.mousedown();
- 01: マウスダウンイベントが発生した時点でハンドラーが実行されます。
- 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
- 03: セレクタにバインドしているマウスダウンイベントを呼び出します。
サンプルコードと実行結果
ここでは、シンプルに div 要素にマウスダウンイベントをバインドしています。 このメソッドの引き合いに mouseup() (マウスアップ) のイベントもコードに含んでいますので、参考にしてください。
実際の動作はマウスカーソルを要素に合わせ、マウスボタンを押して確認してください。
構文の全ての記法の理解には、 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>
- 02-04: $("div").mousedown(function(){関数の処理}) (div 要素にマウスダウンイベントをバインドしています。)
- 03: animate() (このメソッドに関してはリンクを参照してください。補足ですが、ここでの this は div のことを表しています。)
mousedown
&
mouseup
&
mouseup