标签: mousemove

我已经读过mousemove在Safari/Webkit中两次触发事件的问题,但是我面临的问题是mousemove即使鼠标没有移动也会触发.也就是说:当鼠标光标位于加载/刷新页面时附加事件的上下文之上时,它已经触发.因为我将它附加到document(浏览器的整个视口),它会立即在Safari中激活.我试图将它附加到html元素,body包装和包装上div.没变.

$(document).bind('mousemove', function() {
  alert('Mouse moved!');
  $(document).unbind('mousemove');
});

在其他浏览器中是否可行.有谁看到我做错了什么？谢谢.

为什么即使鼠标没有移动,PictureBox的MouseMove事件似乎也会连续触发？我已经尝试了以下代码来证明它(通过简单地创建一个带有PictureBox和Label的新表单).

private void pictureBox1_MouseMove ( object sender, MouseEventArgs e )
{
  label1.Text = DateTime.Now.ToLongTimeString ( ) + ": " + e.X + "," + e.Y;
}

我想是新手问题。

以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。

正在发生的奇怪事情：在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_monitor 函数可以工作，因为我在另一个“mousedown”事件监听器中使用了这个函数，然后它将当前鼠标位置记录到控制台。

//Mouse Monitor

    canvas.addEventListener('mousemove', mouse_monitor, false);


//Mouse Monitor Request
    var mouse = new Array();
    var mouse_monitor = function(e) {
        var canvasOffset=$("#canvas").offset();
        var offsetX=canvasOffset.left;
        var offsetY=canvasOffset.top;
        mouse.x = e.pageX - offsetX;
        mouse.y = e.pageY - offsetY;
        return mouse;
        console.log(mouse);
    }

我们面临着与mousemove连接的jQuery事件传播性能的问题:

我们有一个屏幕填充画布,需要跟踪用户是否在其上拖动鼠标,因此我们在该对象上添加了一个鼠标移动侦听器,如下所示:

ourCanvas.on('mousemove',
   function(event) {
      event.preventDefault();
      //our drag code here
   }
});

此代码工作正常,但我们在一个测试系统上的当前Firefox(24)中遇到了严重的性能问题.分析器告诉我们,大部分时间花在了jQuery.event.dispatch()(我们尝试了当前最新的jQuery 1.8,1.9,1.10和2.0).

我们通过在这里使用"jQuery.event.fix()"性能优化成功地减少了在dispatch()函数中花费的时间:http://bitovi.com/blog/2012/04/faster-jquery-event-fix. html但该测试系统的性能仍远低于我们的预期.

经过一些进一步的测试,我设法将其固定在系统上使用的鼠标上:它使用了1000Hz.我们将用过的鼠标切换到125Hz并且瞧瞧,性能非常好.

我们的假设是,鼠标上的高Hz率引起了很多mousemove事件,因此我们更改了上面的代码以应用事件限制,并且每隔X毫秒只调用事件处理:

var lastMove = 0;
var eventThrottle = 1;
ourCanvas.on('mousemove',
   function(event) {
      event.preventDefault();
      var now = Date.now();
      if (now > lastMove + eventThrottle) {
          lastMove = now;
          //our drag code here
      }
   }
});

它就像一个魅力,表现很棒.即使我们只跳过两毫秒的事件.

现在我有两个问题:

1. 我们有其他位置将mousemove监听器连接到不同的HTML元素,我想将这个手工制作的管道添加到所有这些mousemove处理程序,以免再次遇到问题.这在jQuery(2.0.3)中以某种方式可行吗？我已经看到preDispatchjQuery javascript中的钩子,但是他们已经在调用fix()之后也花了一些时间,我也想保存该调用.

2. 令我感到困惑的是,已经有2 eventThrottle毫秒足以获得非常好的性能所以我添加了一个计数器来查看有多少事件被跳过.令人惊讶的结果是:它只跳过0-1个事件......在100ms的节流下,跳过的事件大约为60-70,所以如果每ms有少于1个mousemove事件,为什么这个代码有这样的毕竟是积极的影响？

感谢任何评论,克里斯托弗

我有一个(深层)嵌套的<div>s 结构.使用Javascript,我想跟踪鼠标当前所在的元素(即"有焦点"),其中更深层次嵌套的元素具有优先级:

我试过的组合mouseover,mouseout,mouseenter,mouseleave和mousemove,但似乎没有简单的解决方案,让我的预期行为.我能够在正确的div上接收鼠标事件,但是这些事件通常会被更高级别的div接收,然后这些事件将不应该得到关注.

例如,在从上到下的转换a中c,事件可能会被b最后一次接收,无意中将焦点放在b而不是c.或过渡c到b可能不是为某些原因被注册.

我不太了解鼠标事件传播的基本机制,足以提出可靠的解决方案.看起来应该是这么简单的事情,但我无法弄明白.

我已经能够按如下方式工作:当div接收mouseenter/ over事件时,标记它并搜索整个DOM子树.如果发现任何其他标志更深,放弃焦点.但这是相当粗糙的,我不禁认为必须有一个更简单的方法.

编辑:解决方案

使用mouseover和mouseout,结合呼叫 stopPropagation()似乎工作得很好.这是一个展示工作解决方案的JSFiddle.

我正在尝试模拟鼠标在随机曲线或抛物线上的移动，因此看起来鼠标实际上在页面上移动。使用Selenium，我只知道如何单击某个元素，但这并不能模拟某些网站上的真实用户。我希望鼠标沿着我计算出的随机线移动，然后单击该元素。

如何设置元素的位置？当用户拖动元素（图像）时，我希望它同步移动。我看到正在调用我的“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}

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

当页面加载结束时,如何在元素上使用jquery移动光标？

谢谢

我们有一个带有 Hwndhost 元素的 Wpf 应用程序，用于通过 DirectX 渲染 3D 内容。我们向客户端公开一个“Panel”接口，其中包含 MouseEnter 和 MouseLeave 事件。对于 Hwndhost“面板”，当我们第一次收到 HwndHost.WndProc 的 WM_MOUSEMOVE 事件时，我们模拟 MouseEnter 事件，因为 win32 没有 WM_MOUSEENTER 事件。另外，对于 HwndHost，我们通过 TrackMouseEvent() 请求 WM_MOUSELEAVE 事件，该事件在我们的“面板”界面上模拟 MouseLeave 事件。

问题是，当用户非常快速地将鼠标移动到 HwndHost 面板或从 HwndHost 面板移出时，我们会先收到鼠标移动到的面板的 Enter 事件，然后再收到鼠标移动的面板的离开事件。 当源面板和目标面板都是 wpf 元素时，不会发生这种情况，仅当涉及 hwndhost 元素时。另外，如果有两个 HwndHost 元素彼此相邻，则会发生相同的行为，因此看起来 win32 没有按照消息发生的顺序发送消息。

有谁知道解决这个问题的方法吗？ 如果有一种方法可以让 Win32 按照事件发生的顺序发送事件，那就太好了。

下面是一个示例应用程序，它演示了向调试器输出窗口打印消息的问题：

// App.xaml.cs
using System;
using System.Windows;
using System.Runtime.InteropServices;

namespace WpfHostingWin32Control
{
    public partial class App : Application
    {
        [DllImport("comctl32.dll", EntryPoint = "InitCommonControls", CharSet =         CharSet.Auto)]
        public static extern …

我正在尝试创建一个具有以下效果的页面：

。

我是对的，直到我尝试为其添加背景。我习惯了 Photoshop（带有图层和蒙版），但不幸的是 html 没有蒙版。

这是我所拥有的。

小提琴

jQuery：

$(document).ready(function() {
  // calculate screen size
  var pageHeight = $(window).height();
  var pageWidth = $(window).width();

  $(window).on('mousemove', function(event) {
    // horizontal offset
      // 100% = completely dependable on mouse position
    var differenceFactor = 5;
    var mouse_x = event.pageX + 1
    var mouse_xPercentage = 100 / (pageWidth / mouse_x);
    var transformX = (mouse_x * -1) / (100 / differenceFactor) - (pageWidth);
    var actualTransform = transformX;

    // vertical offset
    // base degrees
    var …