Question

快速麻烦，我想从右到左无限地移动一个元素（此时尝试使用鼠标悬停事件）。

function cucu2 () {
  document.getElementById('grande').style.cssFloat = 'right';
  document.getElementById('grande').addEventListener('mouseover', cucu, true);
}
function cucu () {
  document.getElementById('grande').style.cssFloat = 'left';
  document.getElementById('grande').addEventListener('mouseover', cucu2);
}
window.addEventListener('load', cucu);

它在右侧完美运行，一旦我将鼠标移到它附近就会将元素向左移动，但是，在那一侧它第一次正常工作，第二个似乎被延迟并且 < em>实际需要2-3秒才能使鼠标生效 并再次向左移动元素。我猜它是关于侦听器的useCapture值的东西，但是如果我将两个侦听器设置为true或false，则元素只移动一次，一次向右移动并且游戏结束。

Answer 1

原因是每只鼠标悬停在你身上，再次连接听众不要删除它们，第二次鼠标悬停时cucu2和cucu被称为保持#grande float: right。

修复它的一种快速方法是在运行后删除调用侦听器：

＆＃13;

function cucu2 () {
  document.getElementById('grande').style.cssFloat = 'right';
  document.getElementById('grande').addEventListener('mouseover', cucu, true);
  document.getElementById('grande').removeEventListener('mouseover', cucu2);
}
function cucu () {
  document.getElementById('grande').style.cssFloat = 'left';
  document.getElementById('grande').addEventListener('mouseover', cucu2);
  document.getElementById('grande').removeEventListener('mouseover', cucu);
}
window.addEventListener('load', cucu);

＆＃13;

#grande {
  background-color: yellow;
  width: 100px;
  height: 100px;
}

＆＃13;

<div id="grande"></div>

＆＃13;

更好的方法是附加一个可在float: left float: right之间切换的事件：

＆＃13;

window.addEventListener('load', function () {
  var element = document.getElementById('grande');
  element.addEventListener('mouseover', function() {
    //if element is floated left we float it right
    element.style.cssFloat = element.style.cssFloat == 'right' ? 'left' : 'right';
  });
});

＆＃13;

#grande {
  background-color: yellow;
  width: 100px;
  height: 100px;
}

＆＃13;

<div id="grande"></div>

＆＃13;

使用JS无限地浮动一个元素

1 个答案: