js获取点击坐标

在JavaScript中获取点击坐标，主要涉及到事件监听以及事件对象的使用。以下是相关基础概念及实现方式：

基础概念：

事件监听：JavaScript允许为HTML元素添加事件监听器，以便在特定事件发生时执行相应的函数。对于点击事件，可以使用click事件。
事件对象：当事件发生时，浏览器会创建一个事件对象，其中包含了与该事件相关的信息，如事件类型、触发事件的元素、鼠标位置等。

获取点击坐标的方法：

在JavaScript中，可以通过监听click事件，并在事件处理函数中访问事件对象的clientX和clientY属性来获取鼠标点击的坐标。这两个属性分别表示鼠标点击位置相对于浏览器视口的水平和垂直坐标。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取点击坐标示例</title>
</head>
<body>
    <div id="clickArea" style="width: 100%; height: 100vh; background-color: lightgray;">
        点击此处获取坐标
    </div>

    <script>
        const clickArea = document.getElementById('clickArea');

        clickArea.addEventListener('click', function(event) {
            const x = event.clientX;
            const y = event.clientY;
            alert(`点击坐标：(${x}, ${y})`);
        });
    </script>
</body>
</html>

优势：