Mouse Event: Klik, Gerakan, dan Koordinat

Kenapa Mouse Event Penting?

Mouse adalah perangkat input utama di desktop: tombol diklik, menu di-hover, gambar di-zoom, peta digeser. Setiap interaksi itu adalah mouse event yang bisa kamu tangkap. Tanpa memahaminya, kamu tidak bisa bikin dropdown yang responsif, tooltip yang mengikuti kursor, atau kanvas gambar sederhana.

Contoh 1: Klik, Klik Ganda, dan Posisi Kursor

const area = document.getElementById("area");

area.addEventListener("click", (e) => {
  console.log("Klik di:", e.clientX, e.clientY);
});

area.addEventListener("dblclick", () => {
  console.log("Diklik dua kali!");
});

area.addEventListener("mousemove", (e) => {
  console.log("Kursor bergerak:", e.clientX, e.clientY);
});

Membaca koordinat: e.clientX/e.clientY adalah posisi relatif terhadap viewport (jendela browser yang terlihat). e.pageX/e.pageY relatif terhadap seluruh dokumen (termasuk bagian yang sudah di-scroll). e.offsetX/e.offsetY relatif terhadap elemen target itu sendiri. Pilih sesuai kebutuhan: untuk tooltip yang nempel di kursor pakai client, untuk menandai titik di peta panjang pakai page.

Contoh 2: Pelacak Koordinat + Efek Hover

<div id="papan" style="width:300px;height:200px;background:#f3f0ff;position:relative;">
  <div id="info">Arahkan kursor ke sini</div>
</div>

const papan = document.getElementById("papan");
const info = document.getElementById("info");

papan.addEventListener("mousemove", (e) => {
  const rect = papan.getBoundingClientRect();
  const x = Math.round(e.clientX - rect.left);
  const y = Math.round(e.clientY - rect.top);
  info.textContent = "x: " + x + ", y: " + y;
});

papan.addEventListener("mouseenter", () => {
  papan.style.background = "#e4d9ff"; // efek hover: lebih gelap
});

papan.addEventListener("mouseleave", () => {
  papan.style.background = "#f3f0ff";
  info.textContent = "Arahkan kursor ke sini";
});

papan.addEventListener("click", (e) => {
  const titik = document.createElement("div");
  const rect = papan.getBoundingClientRect();
  titik.style.cssText = "position:absolute;width:8px;height:8px;background:#8B5CF6;border-radius:50%;";
  titik.style.left = (e.clientX - rect.left - 4) + "px";
  titik.style.top = (e.clientY - rect.top - 4) + "px";
  papan.appendChild(titik); // tandai titik klik dengan dot ungu
});

Jebakan Umum

1. mousemove fire puluhan kali per detik. Menaruh komputasi berat (misal render ulang besar atau request network) di dalam handler mousemove bikin halaman lag. Solusinya: throttle (batasi eksekusi, misal tiap 100ms) atau simpan koordinatnya saja lalu proses di requestAnimationFrame.

2. click ikut fire setelah dblclick selesai? Urutan event saat klik ganda: click, click, dblclick. Jadi handler click akan jalan dua kali sebelum dblclick. Kalau aksinya konflik (klik = pilih, dobel-klik = buka), beri jeda kecil (debounce ~250ms) di handler click untuk memastikan itu bukan awal dari dobel-klik.

3. mouseover vs mouseenter. mouseover/mouseout ikut fire saat kursor masuk/keluar elemen anak (bubbling), sehingga efek hover bisa kedip-kedip. mouseenter/mouseleave tidak bubble, lebih aman untuk efek hover pada container.

4. Koordinat salah saat halaman di-scroll. Pakai clientX untuk posisi di layar, tapi kalau kamu menandai titik di elemen dokumen yang panjang, pakai pageX atau hitung offset dengan getBoundingClientRect() seperti contoh di atas.

Ringkasan

Kuasai click, dblclick, mousemove, dan trio koordinat (client, page, offset). Untuk hover pakai mouseenter/mouseleave agar tidak kedip, dan jangan pernah taruh kerja berat mentah-mentah di dalam mousemove.