如何在 Keydown 函数之后使图像 click()

Question

我有一个在 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

Answer 1

1- 点击总是在光标下的最上面的 div ( 较高的 z-index ) 上注册。
* 不能点击“后面”
2-“因为我不知道图像结束了哪个对应的除数，因此不能 $(#...)”
是错误的：您可以在当前位置下找到 div，因为：
* 你知道你的光标坐标
* 你可以知道你的 div 偏移量（=坐标）

Proof: there's a plugin for that

Answer 2

假设您使用的是 jQuery animate() 函数 (http://api.jquery.com/animate/)，您可以定义要在 complete 上调用的函数（当动画完成时）。

这是一个工作示例（非常粗略的方法；绝对不是我会使用的方法，并且可以通过多种方式改进；最好使用 div 矩阵的知识而不是依赖 CSS 位置（即，扩展data 对象用法进一步），并以编程方式将硬编码尺寸替换为宽度/高度等）。

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

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

$(document.body).on("keydown", function(e) {
  if (e.keyCode > 36 && e.keyCode < 41) {
    var $img = $("#img");
    var dir = e.keyCode === 37 || e.keyCode === 38 ? -1 : 1
    var axis = e.keyCode === 38 || e.keyCode === 40 ? "top" : "left";
    var data = $img.data("goal"); // used to restrict movement at bounds

    if (!data) {
      data = {
        left: 0,
        top: 0
      };
      $img.data("goal", data);
    }

    var pos = (axis === "left" ? data.left : data.top);
    if ((dir > 0 && pos < 180) || (dir < 0 && pos > 0)) {
      var moveAmt = 60 * dir;
      if (axis === "left") {
        data = {
          left: data.left + moveAmt,
          top: data.top
        };
      } else {
        data = {
          top: data.top + moveAmt,
          left: data.left
        };
      }
      $img.data("goal", data);
      var moveCmd = {};
      moveCmd[axis] = "+=" + moveAmt + "px";
      $img.animate(moveCmd, {
        queue: true, // easier to manage than 'false'
        speed: "slow",
        easing: "swing",
        complete: function() {
          // this function is called when animation completes
          $(this).addClass("moved");
          // get number; from http://stackoverflow.com/questions/1100503/how-to-get-just-numeric-part-of-css-property-with-jquery
          var imgLeft = +($(this).css('left').replace(/[^-\d\.]/g, '')); // coerce to number
          var imgTop = +($(this).css('top').replace(/[^-\d\.]/g, '')); // coerce to number
          $(".square").each(function() {
            var offset = $(this).offset();
            if (offset.left === imgLeft && offset.top === imgTop) {
              var fromKeyboard = true;
              $(this).trigger("click", [fromKeyboard]);
              return false;
            }
          });
        }
      });
    }
    return false;
  }
});

$(".square").on("click", function(e, fromKeyboard) {
  var str = "Clicked " + this.id;
  if (fromKeyboard) {
    str += " (FROM KEYBOARD)";
  }
  $("#feedback").html(str);
});

BODY {
  margin: 0;
}
DIV {
  margin: 0;
  padding: 0;
}
#img {
  position: absolute;
  border: 5px solid Red;
  background-color: Blue;
  width: 50px;
  height: 50px;
  z-index: 101;
  top: 0px;
  left: 0px;
}
#img.moved {
  background-color: Orange;
}
.square {
  margin: 0;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #eee;
  border: 5px solid #666;
}
.row {
  font-size: 0;
}
#feedback {
  padding: 10px;
  color: #666;
  font-family: 'Segoe UI', Arial, Sans-serif;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img"></div>
<div id="Blocks" class="row">
  <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" class="row">
  <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" class="row">
  <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" class="row">
  <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 id="feedback">Click into the document area and then hit the ARROW keys</div>

在complete 函数中可以放置模拟鼠标点击的代码。如果您知道#img 的尺寸和 div 及其位置，您可能可以使用一些碰撞检测逻辑来确定要单击哪个，然后在目标元素上触发click 事件就很简单了。

您需要发布显示这些 DIVS 和 #img 的标记，然后我们才能进一步帮助您。