<!DOCTYPE html> <html> <body> <p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p> <em class="message"></em> <script> function showCoords(e) { // e: event object const msg = document.querySelector('.message'); msg.innerHTML = 'clientX value: ' + e.clientX + '<br>' + 'clientY value: ' + e.clientY; } addEventListener('click', showCoords); // 참조하는게 없으면 기본 window 전역 객체 </script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter