Javascript 如何在Keydown函数后使图像单击（）

我有一个在div上移动的图像。我有在单击每个div后调用的方法。如何使图像在移动后模拟鼠标点击。 我的代码：

if (e.keyCode == 39) { 
     $("#img").animate({marginLeft: "+=107px"}, {queue:false}, "slow");
     return false;
}

（39）是正确的举措。 因此，在我单击键盘右键后，我希望我的图像向右移动（完成），然后单击鼠标单击图像中心，单击图像后面的div

我无法使用

trigger（）

和

click（）

函数，因为我不知道图像的对应除数，因此无法

$（#…）

不过，图像在除数上移动得非常完美

<div id="Blocks">
          <div id="41" class="square" ></div>
          <div id ="42" class="square" ></div>
          <div id ="43" class="square" ></div>
          <div id ="44" class="square" ></div>
      </div>
      <div id ="Blocks2">
          <div id ="31" class="square"></div>
          <div id ="32" class="square"></div>
          <div id ="33" class="square"></div>
          <div id ="34" class="square"></div>
      </div>
      <div id ="Blocks3">
          <div id ="21" class="square"></div>
          <div id ="22" class="square"></div>
          <div id ="23" class="square"></div>
          <div id ="24" class="square"></div>
      </div>
      <div id ="Blocks4">
          <div id ="11"  class="square" ></div>
          <div id ="12" class="square"></div>
          <div id ="13" class="square"></div>
          <div id ="14" class="square"></div>
      </div>

---

图像移动到其中一个div上时，需要触发一个事件以知道它是哪个div id

1-单击始终注册在光标下最上面的div（更高的z索引）上。
*您不能单击“后面”
2-“因为我不知道图像的对应除数是哪个，因此不能$（#…）”
为false：您可以在当前职位下找到div，因为：
*您知道您的光标坐标
*您可以知道您的div偏移（=坐标）

---

假设您使用的是jQuery

animate（）

函数（），那么您可以定义一个在

complete

上调用的函数（当动画完成时）

下面是一个工作示例（非常粗略的方法；绝对不是我将使用的方法，可以通过多种方式进行改进；最好使用div矩阵的知识，而不是依赖CSS位置（即，进一步扩展

数据
对象用法），并以编程方式将硬编码的维度替换为宽度/高度，等等）

我还建议使用
queue:true
而不是
false
，因为这样会更容易管理（如果用户连续多次快速按键，您的示例现在就有问题）

向下滚动到代码末尾，单击“运行代码段”，然后单击“完整页面”以获得最佳结果


$（document.body）.on（“向下键”，函数（e）{
如果（e.keyCode>36和&e.keyCode<41）{
var$img=$（“img”）；
var dir=e.keyCode==37 | | e.keyCode==38？-1:1
变量轴=e.keyCode==38 | | e.keyCode==40？“顶部”：“左侧”；
var data=$img.data（“目标”）；//用于限制边界上的移动
如果（！数据）{
数据={
左:0,，
排名：0
};
$img.数据（“目标”，数据）；
}
变量位置=（轴==“左”？数据。左：数据。顶部）；
if（（dir>0&&pos<180）| |（dir<0&&pos>0））{
var moveAmt=60*dir；
如果（轴==“左”）{
数据={
左：data.left+moveAmt，
top:data.top
};
}否则{
数据={
顶部：data.top+moveAmt，
左：data.left
};
}
$img.数据（“目标”，数据）；
var moveCmd={}；
moveCmd[轴]=“+=”+moveAmt+“px”；
$img.animate（moveCmd{
队列：true，//比“false”更易于管理
速度：“慢”，
放松：“挥杆”，
完成：函数（）{
//动画完成时调用此函数
$（此）.addClass（“移动”）；
//获得号码；从http://stackoverflow.com/questions/1100503/how-to-get-just-numeric-part-of-css-property-with-jquery
var imgLeft=+（$（this.css（'left'）.replace（//[^-\d\.]/g'，）；//强制为数字
var imgTop=+（$（this.css（'top'）.replace（//[^-\d\.]/g'，）；//强制为数字
$（“.square”）。每个（函数（）{
var offset=$（this.offset（）；
if（offset.left==imgLeft&&offset.top==imgTop）{
var fromKeyboard=true；
$（this）.trigger（“单击“，[fromKeyboard]）；
返回false；
}
});
}
});
}
返回false；
}
});
$（“.square”）。在（“单击”上，函数（e，来自键盘）{
var str=“Clicked”+this.id；
如果（从键盘）{
str+=“（来自键盘）”；
}
$（“#反馈”）.html（str）；
});
正文{
保证金：0；
}
DIV{
保证金：0；
填充：0；
}
#img{
位置：绝对位置；
边框：5px纯红；
背景颜色：蓝色；
宽度：50px；
高度：50px；
z指数：101；
顶部：0px；
左：0px；
}
#img.moved{
背景颜色：橙色；
}
.广场{
保证金：0；
显示：内联块；
宽度：50px；
高度：50px；
背景色：#eee；
边框：5px实心#666；
}
.行{
字号：0；
}
#回馈{
填充：10px；
颜色：#666；
字体系列：“Segoe UI”，Arial，无衬线；
字体大小：14px；
}

单击文档区域，然后按箭头键
您应该提供复制您的问题的最低限度示例能否发布小提琴？请发布一个显示您的标记（至少是div和图像）的片段，以及更多JS代码，至少显示
按键
或其他内容的整个事件处理程序（我假设
keydown
，但您没有指定。）注意CSS只是用来模拟随着键盘输入移动的图像。有一段时间没有工作了，但是是的。这正是我所做的。使用坐标。干杯