表单中动画image input提交的点击坐标无法通过PHP $_POST获取

DevOps 小满

2026-8-30

问题根因

这个问题由两个独立bug共同导致：

PHP代码存在书写错误：最外层提交判断分支里，误将$_POST["Shoot_x"]写成了$_POST["Shoot_x_x"]，即便Shoot按钮正常提交数据，也无法进入对应的坐标输出逻辑。
前端CSS结构存在点击命中区域错位问题：
1. 你把位移动画加在了包裹Shoot按钮的div容器上，且给这个div设置了24px24px的固定宽高，但内部的Shoot图片实际尺寸为64px64px，溢出了父容器范围。浏览器对溢出父容器的子元素做点击检测时，只会识别父容器覆盖的24px*24px区域为可点击范围，你视觉上看到的移动的图片大部分区域都不在可点击范围内，点击时根本不会触发Shoot按钮的表单提交。
2. 动画属性只写了-webkit-前缀的私有语法，没有写标准CSS动画属性，在非Webkit内核浏览器中动画根本不会生效，进一步加剧了位置和点击区域的错位。
3. 静态图片按钮没有被额外的父容器约束、也没有添加位移动画，点击区域和视觉位置完全重合，所以可以正常提交坐标数据。

修复步骤

修正PHP代码的判断笔误，将外层if条件调整为：

if ((isset($_POST["Staredown_x"])) || (isset($_POST["Gesture_x"])) || (isset($_POST["Shoot_x"]))){

调整CSS结构，删掉包裹Shoot按钮的多余div，直接将动画绑定到Shoot按钮本身，同时补全标准动画语法，给按钮设置和图片实际尺寸匹配的宽高：

input[name="Shoot"] {
   width:64px;
   height:64px;
   position:relative;
   -webkit-animation:glide 1s ease-in-out alternate infinite;
   animation:glide 1s ease-in-out alternate infinite;
}

@-webkit-keyframes glide  {
   from {left:-400px; top:0px;}
   to {left:400px; top:0px;}
}

@keyframes glide  {
   from {left:-400px; top:0px;}
   to {left:400px; top:0px;}
}

调整后的表单HTML部分去掉多余的div包裹：

<form method="post">
<input type="image" name="Staredown" value="Staredown" alt="Staredown" src="https://i.imgur.com/sQwX4Qg.png">
<input type="image" name="Gesture"  value="Gesture"  alt="Gesture" src="https://i.imgur.com/0iJnH5Q.png"><br>
<input type="image" name="Shoot"  value="Shoot"  alt="Shoot" src="https://i.imgur.com/i9oV2j3.png">
</form>

调整后动画的移动主体就是按钮本身，可点击区域和视觉显示的动画位置完全重合，点击后就可以正常在$_POST中获取到Shoot_x和Shoot_y的坐标值。

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