Restricted Double Click Area

Double-click inside this box to get coordinates.

Coordinates will appear here.

Return to Double click tutorial

Complete JavaScript Source

const area = document.getElementById('coordinateArea');
const output = document.getElementById('coordinateOutput');
area.addEventListener('dblclick', (event) => {
  output.textContent = `Coordinates: X = ${event.offsetX}, Y = ${event.offsetY}`;
});

Complete HTML Source

<div id="coordinateArea" class="p-3 border" style="width:300px;max-width:100%;height:200px;">Double-click inside this box to get coordinates.</div>
<p id="coordinateOutput" class="mt-3" aria-live="polite">Coordinates will appear here.</p>