如何正确获取表单中动画图片按钮的点击坐标-php教程-PHP中文网

如何正确获取表单中动画图片按钮的点击坐标

PHP 表单中提交的点击坐标（x/y）与图片是否动画无关；问题本质是 PHP 通过 $_POST['name_x'] 和 $_POST['name_y'] 接收坐标，而常见错误是误写为 name_x_x 等无效键名。

php 表单中 `` 提交的点击坐标（x/y）与图片是否动画无关；问题本质是 php 通过 `$_post['name_x']` 和 `$_post['name_y']` 接收坐标，而常见错误是误写为 `name_x_x` 等无效键名。

在 HTML 表单中使用时，浏览器会在用户点击该图像区域时，自动将鼠标相对于图像左上角的坐标以 name_x 和 name_y 的形式提交至 $_POST 数组（例如 → 提交 $_POST['Shoot_x'] 和 $_POST['Shoot_y']）。这一机制由浏览器原生实现，完全独立于 CSS 动画、JavaScript 或图像格式（GIF/PNG/JPEG）。也就是说，只要元素本身是有效的、可交互的，且未被遮挡或禁用，其点击坐标就一定能被 PHP 正确捕获——动画仅影响视觉表现，不干扰表单提交行为。

你遇到的问题并非“动画导致坐标丢失”，而是典型的 键名拼写错误：代码中检查了 $_POST["Shoot_x_x"]（多了一个 _x），而实际应为 $_POST["Shoot_x"]。这种错误在调试时极易被忽略，尤其当变量名相似、IDE 自动补全误导或复制粘贴残留时。

✅ 正确做法如下：

确保 HTML 中 name 属性简洁唯一（避免空格、特殊字符）：

<input type="image" name="Shoot" src="https://i.imgur.com/i9oV2j3.png" alt="Shoot">

PHP 中严格按 name_x / name_y 形式读取：

文智Doc
文智Doc是一款AI办公效率工具，AI 文档生成工具，一键生成初稿智能排版。

下载
```
if (isset($_POST['Shoot_x'])) {
    $x = (int)$_POST['Shoot_x'];
    $y = (int)$_POST['Shoot_y'];
    echo "Shoot click coords=> X:{$x}; Y:{$y}.<br>";
}
```

推荐健壮性校验（防止恶意输入或空值）：

$validButtons = ['Staredown', 'Gesture', 'Shoot'];
foreach ($validButtons as $btn) {
    if (isset($_POST[$btn . '_x']) && isset($_POST[$btn . '_y'])) {
        $x = filter_var($_POST[$btn . '_x'], FILTER_VALIDATE_INT);
        $y = filter_var($_POST[$btn . '_y'], FILTER_VALIDATE_INT);
        if ($x !== false && $y !== false) {
            echo "{$btn} click coords=> X:{$x}; Y:{$y}.<br>";
            break;
        }
    }
}

⚠️ 注意事项：

CSS 动画不影响表单提交逻辑，但需确保动画未导致元素被其他 DOM 节点遮挡（如 z-index 过低、父容器 overflow: hidden 裁剪等），否则点击可能落在不可见区域。
必须位于
内且 method="post"，否则坐标不会提交。
浏览器会自动发送坐标，无需 JavaScript 干预；若手动用 JS 触发 submit，需自行计算并注入隐藏字段。
坐标值为整数像素，原点为图像左上角（0,0），与 CSS background-position 或 Canvas 坐标系一致。

总结：动画图片按钮的坐标获取失败，99% 源于 PHP 键名书写错误或 HTML 结构疏漏，而非技术限制。始终以 $_POST['{name}_x'] 为准，配合 filter_var() 验证类型，并用浏览器开发者工具的 Network 标签查看实际提交的 POST 数据，即可快速定位问题。