JavaScriptでクリックイベントを使いこなす！5つの使い方とサンプルコード

はじめに
●JavaScriptのクリックイベントとは
●クリックイベントの使い方
●応用例とサンプルコード
- ○サンプルコード4：クリックした要素の情報を取得する
- ○サンプルコード5：クリックイベントを使ったドラッグアンドドロップ機能
●注意点と対処法
- クリックイベントのバブリングへの注意
- クリックイベントとタッチイベントの違いへの注意
まとめ

はじめに

この記事を読めば、JavaScriptでクリックイベントを使いこなすことができるようになります。

初心者でも分かりやすいサンプルコードや注意点を紹介していますので、ぜひ参考にしてみてください。

●JavaScriptのクリックイベントとは

クリックイベントは、ウェブページ上の要素をクリックしたときに発生するイベントです。

JavaScriptを使って、クリックイベントを検出して特定の処理を実行することができます。

●クリックイベントの使い方

ここでは、クリックイベントを使った3つの基本的な使い方とサンプルコードを紹介します。

○サンプルコード1：ボタンをクリックしてアラートを表示する

このコードでは、ボタンをクリックするとアラートが表示されるサンプルを紹介しています。

この例では、ボタンのクリックイベントに関数showAlert()を紐づけて、アラートを表示しています。

<!DOCTYPE html>
<html>
<head>
<script>
function showAlert() {
  alert("ボタンがクリックされました！");
}
</script>
</head>
<body>

<button onclick="showAlert()">クリックしてください</button>

</body>
</html>

○サンプルコード2：画像をクリックして別の画像に切り替える

このコードでは、画像をクリックすると別の画像に切り替わるサンプルを紹介しています。

この例では、画像のクリックイベントに関数changeImage()を紐づけて、画像のsrc属性を切り替えています。

<!DOCTYPE html>
<html>
<head>
<script>
function changeImage() {
  document.getElementById("myImage").src = "another_image.jpg";
}
</script>
</head>
<body>

<img id="myImage" src="sample_image.jpg" onclick="changeImage()">

</body>
</html>

○サンプルコード3：クリックイベントを使ったアコーディオンメニュー

このコードでは、クリックイベントを使ってアコーディオンメニューを作成するサンプルを紹介しています。

この例では、メニュー項目のクリックイベントに関数toggleContent()を紐づけて、表示内容を切り替えています。

<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
  cursor: pointer;
}
.content {
  display: none;
}
</style>
<script>
function toggleContent(event) {
  var content = event.nextElementSibling;
  content.style.display = content.style.display === "block" ? "none" : "block";
}
</script>
</head>
<body>

<h3 class="accordion" onclick="toggleContent(this)">メニュー1</h3>
<div class="content">
  <p>メニュー1の内容です。</p>
</div>

<h3 class="accordion" onclick="toggleContent(this)">メニュー2</h3>
<div class="content">
  <p>メニュー2の内容です。</p>
</div>

</body>
</html>

●応用例とサンプルコード

○サンプルコード4：クリックした要素の情報を取得する

このコードでは、クリックした要素の情報を取得するサンプルを紹介しています。

この例では、クリックイベントのイベントオブジェクトからクリックされた要素の情報を取り出しています。

<!DOCTYPE html>
<html>
<head>
<script>
function showElementInfo(event) {
  var target = event.target;
  alert("クリックされた要素: " + target.tagName + "\nID: " + target.id);
}
</script>
</head>
<body onclick="showElementInfo(event)">

<h1 id="header">クリックして情報を表示</h1>
<button id="button">ボタン</button>

</body>
</html>

○サンプルコード5：クリックイベントを使ったドラッグアンドドロップ機能

このコードでは、クリックイベントを使ってドラッグアンドドロップ機能を実装するサンプルを紹介しています。

この例では、マウスダウンイベントとマウスアップイベントを利用して、ドラッグ可能な要素を作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
.draggable {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  cursor: move;
}
</style>
<script>
var draggedElement = null;
var offsetX = 0;
var offsetY = 0;

function onMouseDown(event) {
  if (event.target.classList.contains("draggable")) {
    draggedElement = event.target;
    offsetX = event.clientX - draggedElement.offsetLeft;
    offsetY = event.clientY - draggedElement.offsetTop;
  }
}

function onMouseUp() {
  draggedElement = null;
}

function onMouseMove(event) {
  if (draggedElement) {
    draggedElement.style.left = event.clientX - offsetX + "px";
    draggedElement.style.top = event.clientY - offsetY + "px";
  }
}

document.addEventListener("mousedown", onMouseDown);
document.addEventListener("mouseup", onMouseUp);
document.addEventListener("mousemove", onMouseMove);
</script>
</head>
<body>

<div class="draggable"></div>

</body>
</html>