Mousemove 事件未在页面元素或文档上触发答案

【问题标题】：Mousemove event not firing on page element or documentMousemove 事件未在页面元素或文档上触发
【发布时间】：2016-10-10 11:04:40
【问题描述】：

我正在尝试使用 js 滑块 slick，但是当我在我的网站上包含滑块代码时，默认的“可拖动”选项不起作用。 更具体地说，我无法在幻灯片 div 或我的网页 (Chrome) 中的文档上捕获任何 mousemove 事件。

在本地运行代码时，我可以观察到“mouseup”、“mousemove”和“mouseup”事件，但是当我将滑块代码放入网页时，我只能观察到“mouseup”和“ mousedown 事件。

以下是有效的本地代码。如果你运行它，它会在滑块 div 中记录 mousedown、mousemove 和 mouseup 事件。

当我将相同的代码移动到网站时，我无法观察到来自滑块 div 或来自文档的任何 mousemove 事件。是否已经有一些 js 正在运行完全防止页面触发 mousemove 事件？

<html>
  <head>
      <title>My Now Amazing Webpage</title>

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"/>
      <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
  </head>
  <body>

  <style>

    #container {
      width: 450px;
      height: 300px;
      margin: 0 auto;
      border: 2px solid black;
    }

  </style>

  <div id="container">
    <div class="your-class">
      <div><img src="http://lorempixel.com/300/300" /></div>
      <div><img src="http://lorempixel.com/300/300" /></div>
      <div><img src="http://lorempixel.com/300/300" /></div>
    </div>
  </div>



  <script type="text/javascript">
    $(document).ready(function(){

        $('.your-class').slick();

        $('.slick-slide').on('mousemove', function(e){
          console.log("mousemove");
        });

        $('.slick-slide').on('mousedown', function(e){
          console.log("mousedown");
        });

        $('.slick-slide').on('mouseup', function(e){
          console.log("mouseup");
        });
    });
  </script>

  </body>
</html>

【问题讨论】：

你不需要type="text/javascript"。
是的，真的 - 谢谢。

标签： javascript html events mouseevent mousemove

【解决方案1】：

不确定这是否能回答您的具体问题，但它可能对出现在这里的其他人有所帮助。

如果您正在使用 Chrome 开发工具进行测试（例如）并且您的设备配置文件处于活动状态，那么 Chrome 将模拟触摸交互而不发送 mousemove 事件（就像浏览器可以的手机/平板电脑一样） t 告诉用户什么时候手指没有触摸屏幕）。

如果您将设备类型从（例如）“桌面（触摸）”更改为“桌面”，您将保持所需的屏幕尺寸，但会恢复鼠标事件。

【讨论】：

这是我在处理 Adobe CEP 扩展时的情况！

【解决方案2】：

问题在于特定的镀铬标签。我不知道我为什么会遇到问题，但刷新它并没有改变任何东西——但是当我在一个隐身窗口和一个新的 chrome 窗口中加载该网站时，它修复了它。

选项卡之间唯一不同的是，我遇到问题的选项卡打开的时间要长得多（约 3-4 小时）。我不知道为什么这会影响任何事情，但如果有人有任何想法，我很想听听他们的想法。

【讨论】：

我也遇到了同样的问题，如果我不阅读这篇文章，我会浪费很多时间。非常特殊的问题（浏览器错误？）。
有时它有助于清除缓存。只需打开控制台，然后右键单击刷新按钮和“清空缓存并重新加载”。我通常这样做:)

【解决方案3】：

您的本地代码运行良好。通过像

这样的文档抓取事件

$(document).on('mousemove', '.slick-slide', function(){ console.log('mousemove'); });

在网站上查看。

【讨论】：

是的，我的本地代码确实有效，只是当我把它放在网站上时，它不起作用。
浏览器出了点问题 --- 还是不知道是什么问题，但我在隐身标签中尝试过，mouseevents 工作正常，然后我只是做了一个新的普通 chrome 标签工作正常。仅在打开超过 3 小时左右的 chrome 选项卡中出现问题。

【解决方案4】：

大多数遇到这种情况的开发者都打开了他们的开发控制台，在 Chrome 中，这通常会将您的输入更改为触摸模式，在这种模式下，没有像在桌面上那样的恒定光标。

要么使您的代码具有不同的触摸输入行为以获得所需的结果，要么您可以通过更改所附屏幕截图中显示的选项将设备类型添加到您的开发控制台会话。

【讨论】：