如何通过Apps Script获取Google Sheets中图片点击的XY坐标？

嘿，我完全懂你现在的困惑——Google Sheets的Apps Script事件系统和普通浏览器端JS差得挺多的，你之前用的e.clientX/e.clientY在Sheet的图片点击事件里根本不存在，这也是Google官方文档没讲明白的坑之一。

为什么你的原代码不行？ #

你写的这个函数：

function test(e) {
  Browser.msgBox('You clicked it!');
  var yCoordinate = e.clientY;
  var xCoordinate = e.clientX;
}

如果是绑定到图片的点击事件，这里的e参数不是浏览器的DOM事件对象，它几乎是空的，没有clientX/clientY这些属性，所以你根本拿不到坐标值。

正确的实现方案（结合客户端HTML） #

要获取鼠标坐标，必须借助客户端的HTML脚本（因为只有浏览器环境才能捕获鼠标位置），然后把坐标传递给服务器端的Apps Script。下面是一步步的实现：

1. 创建服务器端脚本（打开侧边栏）

在Apps Script编辑器里，写入这个函数：

function openCoordinateCaptureSidebar() {
  // 创建侧边栏的HTML界面
  const html = HtmlService.createHtmlOutputFromFile('Sidebar')
      .setTitle('捕获点击坐标');
  // 显示侧边栏
  SpreadsheetApp.getUi().showSidebar(html);
}

2. 创建客户端HTML文件

在Apps Script编辑器里，点击左上角的「文件」→「新建」→「HTML文件」，命名为Sidebar，然后写入以下内容：

<!DOCTYPE html>
<html>
  <body style="padding: 10px;">
    <h3>点击工作表获取坐标</h3>
    <p>X坐标: <span id="xVal" style="font-weight: bold;"></span></p>
    <p>Y坐标: <span id="yVal" style="font-weight: bold;"></span></p>
    <p>点击后坐标会自动保存到工作表A1/B1单元格</p>

    <script>
      // 监听整个页面的点击事件
      window.addEventListener('click', function(e) {
        // 获取鼠标相对于浏览器窗口的坐标
        const x = e.clientX;
        const y = e.clientY;
        
        // 更新侧边栏的坐标显示
        document.getElementById('xVal').textContent = x;
        document.getElementById('yVal').textContent = y;
        
        // 把坐标发送到服务器端脚本，保存到Sheet
        google.script.run.saveCoordinates(x, y);
      });
    </script>
  </body>
</html>

3. 创建保存坐标的服务器端函数

回到Apps Script的主脚本文件，添加这个函数：

function saveCoordinates(x, y) {
  const activeSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 在A1单元格写入X坐标，B1写入Y坐标
  activeSheet.getRange('A1').setValue(`X坐标: ${x}`);
  activeSheet.getRange('B1').setValue(`Y坐标: ${y}`);
}

4. 绑定脚本到图片

回到你的Google Sheets，右键点击要监听的图片，选择「分配脚本」，输入函数名openCoordinateCaptureSidebar，点击确定。

使用方法 #

点击绑定好脚本的图片，侧边栏会弹出。之后你点击工作表里的任何位置（包括这张图片），对应的XY坐标会显示在侧边栏里，同时自动保存到工作表的A1和B1单元格。

额外说明 #

• 如果只想捕获点击图片时的坐标，可以在客户端脚本里做进一步判断，但因为Sheet的内容在iframe中，跨域限制会让元素判断有点麻烦。如果你的图片是插入到固定单元格的，也可以通过脚本先获取图片的位置（getLeft()/getTop()），再用客户端捕获的坐标减去这些值计算得到。上面的方案是最通用的快速实现方式。
• 这里的坐标是相对于浏览器窗口的坐标，如果需要相对于图片本身的坐标，你可以先通过Apps Script获取图片的位置参数，再做差值计算。

内容的提问来源于stack exchange，提问作者user770687