为何无法为rand类div绑定jQuery hover随机定位函数？

我正在制作一个网站，希望通过jQuery的hover函数让一个div切换到随机位置。目前仅能通过将该函数绑定到一个固定的独立按钮上，当鼠标悬停按钮时实现div移动。请问为何无法将相同的JavaScript函数直接应用到类名为rand的div上？

代码示例 #

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="rand_pos" class="rand"><img src="Media/MargeDancing_Test01.gif"></div> 
<button class="new_pos">Remember</button>
<div id="pos_log"></div> <!-- 用于显示位置日志的元素 -->

JavaScript代码 #

$('.new_pos').hover(function() { 
  var bodyWidth = document.body.clientWidth 
  var bodyHeight = document.body.clientHeight; 
  var randPosX = Math.floor((Math.random() * bodyWidth)); 
  var randPosY = Math.floor((Math.random() * bodyHeight)); 
  var posLog = document.getElementById('pos_log'); 
  var posXY = 'x: ' + randPosX + '<br />' + 'y: ' + randPosY; 
  $('#rand_pos').css('left', randPosX); 
  $('#rand_pos').css('top', randPosY); 
  posLog.innerHTML = posXY 
});

嘿，这个问题我太熟了！核心原因其实是目标div会自己移动，导致hover事件的状态被打断：

当你把hover事件绑到按钮上时，按钮是固定不动的——鼠标悬停上去，事件稳定触发，div移动后不影响按钮的hover状态。但如果把事件直接绑到那个rand类的div上：

1. 鼠标刚一悬停div，触发hover的进入回调，div立刻移动到新位置；
2. 移动后的div离开了鼠标原来的位置，导致鼠标瞬间不再悬停在div上，触发hover的离开回调；
3. 这个过程会快速反复，看起来就像div要么不动，要么疯跳根本停不下来，甚至浏览器会因为频繁触发事件出现卡顿。

解决办法 #

最简单的修复方式是只监听鼠标进入div的事件，而不用hover的组合事件，因为hover其实是mouseenter（鼠标进入）和mouseleave（鼠标离开）的封装，我们只需要前者。

修改后的JavaScript代码如下：

$('.rand').mouseenter(function() { 
  // 获取页面可用宽高，减去div自身宽高避免移出视野
  var bodyWidth = document.body.clientWidth - $(this).width();
  var bodyHeight = document.body.clientHeight - $(this).height();
  var randPosX = Math.floor(Math.random() * bodyWidth); 
  var randPosY = Math.floor(Math.random() * bodyHeight); 
  var posLog = document.getElementById('pos_log'); 
  var posXY = 'x: ' + randPosX + '<br />' + 'y: ' + randPosY; 
  
  // 用$(this)指代当前触发事件的div，不用硬写id更灵活
  $(this).css({
    left: randPosX,
    top: randPosY
  }); 
  posLog.innerHTML = posXY;
});

另外我还加了两个小优化：

• 计算随机位置时减去了div自身的宽高，避免div移到页面边缘外面看不到；
• 用$(this)代替固定的$('#rand_pos')，如果以后有多个同类div，代码也能直接复用。

这样修改后，每次鼠标移动到div上，它就会立刻跳到新的随机位置，完美实现你想要的效果！

内容的提问来源于stack exchange，提问作者Lexy