【JavaScript】マウスをクリックした瞬間（mousedown）にイベントを即座に発火させる方法
マウスボタンを押した瞬間にイベントを発生させたい場合、通常の click イベントでは対応できません。なぜなら click イベントは、マウスボタンを押してから離した後にようやく発火するためです。
このようなケースでは、addEventListener() メソッドに mousedown イベントを指定することで解決できます。mousedown は、マウスボタンが押された直後に即座に発火するイベントです。
実装例
以下がサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
</body>
<script>
document.addEventListener("mousedown", function () {
console.log("Mouse down event is happening");
});
</script>
</html>
プログラムの実行方法
上記のプログラムを実行するには、ファイルを「anyName.html」（index.html など任意の名前）として保存します。その後、VS Code エディター上でファイルを右クリックし、「Open with Live Server」を選択してブラウザーで開いてください。
実行結果
ページを開いた時点では、コンソールに何も表示されていません。
ここでマウスをクリックすると、mousedown イベントが即座に発生し、コンソールには以下のように出力されます。
mousedown・mouseup・click の違いを整理
マウス関連のイベントは似ているようで発火タイミングが異なります。用途に応じて使い分けましょう。
| イベント名 | 発火タイミング |
|---|---|
mousedown | マウスボタンを押した瞬間 |
mouseup | マウスボタンを離した瞬間 |
click | 押して離す動作が両方完了した後 |
ゲームやドラッグ操作、描画アプリなど「ボタンを押した瞬間に反応させたい」処理を実装する際は、mousedown イベントを活用すると自然な操作性を実現できます。
-
JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法
Web開発では、ボタンをクリックしたタイミングでテキストフィールド（テキストボックス）の中身を空にしたいケースがよくあります。たとえば、検索条件のリセットやフォーム入力内容の初期化などが代表例です。この記事では、JavaScriptを使ってこの処理をシンプルに実現する方法を解説します。 基本の考え方 実装に必要なのは、次の2つのステップだけです。 HTML側でonclick属性を使い、ボタンクリック時に呼び出すJavaScriptの関数を指定する 関数内でdocument.getElementById()によって対象の要素を取得し、そのvalueプロパティに空文字列（）を代入する docu
-
JavaScriptで指定した時刻になったら関数を自動実行する方法
JavaScriptで「特定の日時に達したら関数を実行したい」というケースでは、目標時刻までの時間差（ミリ秒）を計算し、それを setTimeout() に渡すのが基本のアプローチです。ここでは、その実装手順をサンプルコードとともにわかりやすく解説します。 実装の流れ トリガーしたい日時を Date オブジェクトで作成し、getTime() でミリ秒値に変換します。 現在時刻も同様に getTime() でミリ秒として取得します。 「目標時刻 − 現在時刻」の差分を計算します。これが「あと何ミリ秒で目標時刻になるか」を表します。 差分を setTimeout() の第2引数に渡し、第1引数に