使用CSS转换的jQuery mousemove

时间:2016-02-20 03:54:26

标签: javascript jquery css

我正在制作一个涉及使用jQuery点击和拖动的游戏。当您在游戏div(红色)内部单击时,会出现一个黑色块,您可以拖动它。我在这里做了一个小提琴:

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

我想在鼠标移动和块移动之间稍微延迟,所以我在块上添加了CSS过渡属性。

只要您在游戏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');
}

3 个答案:

答案 0 :(得分:1)

当您将光标移到红色和黑色框外时,它位于#game之外,因此mousemove事件处理程序未触发。您应该将mousemove事件处理程序分配给document而不是#game,如下所示:

$(document).mousemove(updatePosition);

请参阅updated JS Fiddle

答案 1 :(得分:0)

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

块停止移动的原因是只有在移动红框时才会运行鼠标悬停事件侦听器。

跳跃归功于event bubbling。黑匣子是红色框的子元素,因此将鼠标悬停在黑匣子上意味着您也将鼠标悬停在红色框上。 (查看链接以获得正确的解释。)

答案 2 :(得分:-1)

解决方案:

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

无论出于何种原因,取消绿色框上的默认行为都会停止任何跳跃。

更新了小提琴:

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