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

问题描述 投票：0回答：6

我正在尝试使用 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>
javascript html events mouseevent mousemove
6个回答
14
投票

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

如果您正在使用 Chrome 开发工具进行测试（例如）并且设备配置文件处于活动状态，那么 Chrome 将模拟触摸交互并且不会发送鼠标移动事件（就像手机/平板电脑的情况一样，浏览器无法识别）当用户手指未触摸屏幕时）。

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

4
投票

问题在于特定的 chrome 选项卡。我不知道为什么遇到问题，但刷新它并没有改变任何东西 - 但当我在隐身窗口和新的 Chrome 窗口中加载该网站时，它修复了它。

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

2
投票

您的本地代码运行良好。通过文档抓取事件，如 

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

在网站上查看。

1
投票

大多数遇到此问题的开发人员都会打开他们的开发控制台，在 Chrome 中，这通常会将您的输入更改为触摸模式，在这种模式下，不会像桌面上那样出现恒定的光标。

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

1
投票

如果您在 Chrome 开发工具上选择了响应模式，这似乎是一个问题

您可以通过切换到桌面来轻松解决它：

1。尝试切换设备工具栏

Toggle Device toolbar

2。手动切换到桌面模式

Add Device Type Select Desktop

0
投票

我遇到了同样的问题，我使用了“mousemove”事件侦听器。当在实时服务器上运行时，它没有将任何鼠标事件记录到控制台上（我已经打开了我的开发工具）。但是，我关闭了开发工具并将鼠标悬停在元素上，然后打开开发工具控制台并记录了它。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.