Question

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

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

（39）做出正确的举动。因此，在我单击右键盘按钮后，我希望我的图像向右移动（DONE），然后单击鼠标点击该图像的中心点击它后面的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）上。
*您无法点击＆＃34;背后＆＃34;
2-＆＃34;因为我不知道图像结束了哪个相应的除数因此不能$（＃...）＆＃34;
是假的：你可以在当前位置找到div，因为：
*你知道你的光标坐标
*你可以知道你的divs偏移（=坐标）

Proof: there's a plugin for that

Answer 2

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

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

我还建议使用queue: true代替false，因为它更易于管理（如果用户连续多次快速点击密钥，您的示例现在就会出现问题）

向下滚动到代码末尾，然后点击＆＃34;运行代码段＆＃34;并点击＆＃34;整页＆＃34;为了获得最佳效果。

＆＃13;

$(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);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在complete函数中，您可以输入用于模拟鼠标单击的代码。如果您知道#img的维度以及div和它们的位置，您可以使用一些碰撞检测逻辑来确定要点击哪一个，那么触发click事件就很简单了。目标元素。

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

如何在Keydown函数之后使图像click（）

2 个答案: