标签: mousemove

我试图制作一个图像拇指的"线",它在鼠标移动时滚动.我得到了它的工作,但我现在的问题是,我想在侧面做一个"填充",所以我不必将鼠标一直到两侧看到第一个/最后一个拇指.但我真的无法让它工作:/

这是我现在的脚本:

// MouseMove scrolling on thumbs
var box = $('.thumbs-block'),
    innerBox = $('.thumbs'),
    lastElement = innerBox.find('a:last-child');

var offsetPx = 100;
var boxOffset = box.offset().left;

var boxWidth = box.width() /* - (offsetPx*2)*/;
var innerBoxWidth = (lastElement[0].offsetLeft + lastElement.outerWidth(true)) - boxOffset /* + (offsetPx*2)*/;

scrollDelayTimer = null;
box.mousemove(function (e) {
    console.log('boxWidth: ' + boxWidth + '   innerBoxWidth: ' + innerBoxWidth + '   box.scrollLeft(): ' + box.scrollLeft());

    var mouseX = e.pageX;
    var boxMouseX = mouseX - boxOffset;

    if ((boxMouseX > offsetPx) && …

我正在尝试使用 react-testing-libary 测试拖放功能。拖放功能来自 framer-motion 并且代码在 reacy 中。据我了解，它使用 mousedown、mousemove 和 mouseup 事件来执行此操作。我想测试以下基本组件的拖放功能：

export const Draggable: FC<DraggableInterface> = ({
  isDragging,
  setIsDragging,
  width,
  height,
  x,
  y,
  radius,
  children,
}) => {
  return (
      <motion.div
        {...{ isDragging }}
        {...{ setIsDragging }}
        drag
        dragConstraints={{
          left: Number(`${0 - x}`),
          right: Number(
            `${width - x}`,
          ),
          top: Number(`${0 - y}`),
          bottom: Number(
            `${height - y}`,
          ),
        }}
        dragElastic={0}
        dragMomentum={false}
        data-test-id='dragabble-element'
      >
        {children}
      </motion.div>
  );
};

我有一个测试片段如下：

it('should drag the node to the new position', async () => …

我试图找出一种简洁的方法来聚合mousemove事件,以便我确保我的代码被调用,但每250-300毫秒只调用一次.

我曾考虑使用类似下面的内容,但想知道是否有更好的模式,或jQuery提供的东西会做同样的事情:

var mousemove_timeout = null;

$('body').mousemove(function() {
  if (mousemove_timeout == null) {
    mousemove_timeout = window.setTimeout(myFunction, 250);
  }
});

function myFunction() {
  /*
   * Run my code...
   */

  mousemove_timeout = null;
}

编辑:下面的接受的答案会很好地工作对于这种情况,但是,我发现,mousestop()在回答中提供的功能实际上消除了我需要的聚集,所以,如果你正在阅读这个问题,并寻找一个答案,查看是否mousestop插件是你真正需要的!

我已将一些MouseMove和MouseClick事件附加到我的程序中,接下来就是其中之一:

1. 获得"全局"鼠标移动,这样我甚至可以在窗体外读取鼠标位置.
2. 首先防止我的鼠标离开表单.

我的项目是一个游戏,因此像大多数其他游戏一样防止鼠标离开我的形状真是太棒了(如果你用alt + tab fe切换焦点,你可以把它移出来)并看看其他人的答案.要求全球摩苏运动的问题,他们似乎对我的需求非常混乱.

有没有一种简单的方法可以阻止我的鼠标超出我的表格的边界？或者实际上为了防止它首先超出边界,我希望鼠标留在客户区域内.

有关游戏的其他信息:

这场比赛是一场5到30秒的短暂生存游戏(在你活着的30秒后变得太难了)你必须用鼠标躲避子弹.当你将鼠标移出表格然后播放器(System.Windows.Forms.Panel连接到鼠标)停止移动并立即被子弹击中时,这真的很烦人.这就是为什么防止鼠标离开该区域会很好.

我正在使用此功能移动光标.

[DllImport("user32.dll")]
static extern bool SetCursorPos(int X, int Y);

当我使用热键触发它时,光标将移动到正确的坐标,下次我移动鼠标时它会从该位置继续.按预期工作.

但是我需要在MouseMove事件期间触发SetCursorPos.如果用户将鼠标移动到某个区域,我希望它跳到另一个地方并从那里继续.但是现在它跳到目的地,然后立即跳回(90%的时间).我该如何避免这种行为？

编辑:我决定通过将光标剪切为1 x px square为1 mousemove事件来解决它.Cursor.Clip(MousePosition,new Rectangle(1,1));

今天我发生了以下事情:我有一个现有的mousemove事件,touchmove后来又添加了,像这样:

$(window).on "mousemove touchmove", (e) ->
  pos_x = e.pageX
  pos_y = e.pageY

不幸的是,两个变量都undefined在移动设备上

我必须在按下鼠标时才实现鼠标移动事件.

我只需要在鼠标移动和鼠标移动时执行"OK Moved".

我用过这段代码

 $(".floor").mousedown(function() {
  $(".floor").bind('mouseover',function(){
      alert("OK Moved!");
  });
})
.mouseup(function() {
 $(".floor").unbind('mouseover');
});

我已经设置了一个mousemove处理程序来拖动元素。但是，如果您移动光标太快，它就会失去对该元素的跟踪，并且不会再移动它，直到您将光标重新移到该元素上。

这是一个 JSFiddle演示。

为什么要这样做？

 $this.on("mousemove.partmove touchmove", function(e){
     e.preventDefault();
     var moveL = e.clientX; 
     var moveT = e.clientY;
     console.log("mov " + (moveT-vOffset) );
     $this.css({"left": moveL-hOffset, "top": moveT-vOffset});
 });

如何设置元素的位置？当用户拖动元素（图像）时，我希望它同步移动。我看到正在调用我的“mousemove”处理程序。但是我无法让元素实际移动。

这是 mousemove 处理程序（被拖动的元素是“overlay”）：

function handleMouseMove (event)
{
  var deltaX = event.movementX;
  var deltaY = event.movementY;

  var divOverlay = document.getElementById ("overlay");
  var rect = divOverlay.getBoundingClientRect();

  divOverlay.style.left = rect.x + deltaX;
  divOverlay.style.top = rect.y + deltaY;
}

这是“叠加”的 html：

<div id="overlay">
  ... some other stuff ...
  <img id="large" src="something.jpg" >
</div>

和CSS：

#overlay {position:absolute; left:0; top:0}

似乎默认的拖动动作出现了，这是一个随鼠标移动的“叠加”阴影。但是元素本身不会移动。

在 Chrome 锁定指针后，如果您移动鼠标，MouseEvent.movementX 和 MouseEvent.movementY 有时会返回一个非常大的数字，似乎大约是窗口大小的一半。

这是一个最小的代码示例：

<html>
    <body>
        <canvas id="canvas" width="100" height="100" style="border: 1px solid">
        </canvas>
        <script>
            var canvas = document.getElementById("canvas");

            canvas.addEventListener("mousedown", function() {
                canvas.requestPointerLock();
            });

            document.addEventListener("mousemove", function() {
                if(Math.abs(event.movementX) > 100)
                    console.log(event.movementX);
            });
        </script>
    </body>
</html>

我的预感是，当您调用 requestPointerLock() 时，它实际上并没有将鼠标锁定在一个位置，而只是将其隐藏。当鼠标离开窗口时，它会将鼠标捕捉回中心，这会导致变量出现大的尖峰。

大尖峰的原因是什么，我该如何解决？