帶有CSS過渡的jQuery mousemove

Question

我正在制作一個涉及使用jQuery單擊和拖動的游戲。 當您在游戲div（紅色）內部單擊時，會出現一個黑色塊，您可以在其中拖動。 我在這里開了個小提琴：

https://jsfiddle.net/r9pet266/6/

我希望在鼠標移動和塊移動之間稍有延遲，因此我在塊上添加了CSS Transition屬性。

只要在游戲div內單擊並拖動，動作就看起來很平穩，但是一旦在游戲div之外單擊，則在其內部單擊和拖動變得非常跳躍。

有人知道為什么嗎？

的HTML

<div id="outer">
  <div id="game"></div>
  <div id="instructions">
    1. Click and drag inside the red box --> smooth <br>
    2. Click on the green <br>
    3. Click and drag inside the red box --> jumpy
  </div>
</div>

的CSS

#outer {
  height: 500px;
  background: green;
}

#instructions {
  position: absolute;
  top: 350px;
  left: 100px;
}

#game {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 270px;
  background: red;
}

.block {
  transition: 100ms;
  position: absolute;
  width: 80px;
  height: 80px;
  background: black;
}

JavaScript ：

var $block;

$('#game').mousedown(function (e) {
  e.preventDefault();

  $block = $('<div>');
  $block.addClass('block');
  updatePosition(e);
  $('#game').append($block);

  $('#game').mousemove(updatePosition);

  $(window).one('mouseup', function () {
    $block.remove();
    $('#game').off('mousemove');
  });
});

function updatePosition (e) {
  $block.css('top', e.pageY - 45 + 'px');
  $block.css('left', e.pageX - 45 + 'px');
}

Answer 1

當您將光標移到紅色和黑色框的外面時，它在#game的外面，因此mousemove事件處理程序不會觸發。 您應該為document分配mousemove事件處理程序，而不是#game ，如下所示：

$(document).mousemove(updatePosition);

參見更新的JS Fiddle 。

Answer 2

// change
$('#game').mousemove(updatePosition);
// to 
$(window).mousemove(updatePosition);

塊停止移動的原因是，僅當您在紅色框上移動時，才會運行mouseover事件偵聽器。

跳躍歸功於事件的冒泡 。 黑框是紅色框的子元素，因此將鼠標懸停在黑框上意味着您也將鼠標懸停在紅色框上。 （查看鏈接以獲取正確的說明。）

Answer 3

解：

$('#outer').mousedown(function (e) {
    e.preventDefault();
});

無論出於何種原因，取消綠色框上的默認行為都會停止任何跳動。

更新的小提琴：

https://jsfiddle.net/r9pet266/7/