Question

我正在使用SO用户的这段代码：

   $("#rightSubMenu").mousemove(function(e){
      console.log('executed');
      var h = $('#rightSubMenuScroller').height()+13;
      var offset = $($(this)).offset();
      var position = (e.pageY-offset.top)/$(this).height();
      if(position<0.33) {
         $(this).stop().animate({ scrollTop: 0 }, 1000);
      }
      else if(position>0.66) {
         $(this).stop().animate({ scrollTop: h }, 2000);
      }
      else
      {
         $(this).stop();
      }
   });

它的作用基本上是，当你将鼠标悬停在rightSubMenu上时，它会移动#rightSubMenuScroller，它位于#rightSubMenu内。问题是，每移动一个像素，它就会再次执行整个函数，从而产生滞后动画。

当我激活滚动并将鼠标移离元素时，动画效果很好。

我需要修复代码，使其不会滞后。有什么想法吗？

Answer 1

您应该在此活动结束时添加event.stopPropagation()。

$("#rightSubMenu").mousemove(function(e){
  // You code...
  e.stopPropagation();
});

这将阻止事件冒泡DOM树。

或者，根据您的DOM结构，尝试使event.stopImmediatePropagation()保持所有其他事件处理程序的执行。

Answer 2

立即查看：http://jsfiddle.net/n3Q9j/6/

当鼠标下的元素移动时，如何阻止mousemove（）执行？

2 个答案: