鼠标在页面元素或文档上移动事件未触发

5
我正在尝试使用js轮播插件slick,但是当我将轮播代码放到我的网站上时,默认的“可拖动”选项无法正常工作。更具体地说,在网页中我无法捕获滑块div或文档中的任何mousemove事件(Chrome)。 在本地运行代码时,我没有问题观察到'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" - gcampbell
是的,正确的 - 谢谢。 - haydenwagner
5个回答

14

我不确定这是否能回答你的具体问题,但对于其他人来说可能会有帮助。

如果你正在使用 Chrome 开发者工具进行测试,并且你已经激活了设备配置文件,那么 Chrome 将模拟触摸交互而不发送鼠标移动事件(例如对于手机/平板电脑而言,浏览器无法判断用户手指何时没有触摸屏幕)。

如果你将设备类型从“桌面版(触摸屏)”更改为仅“桌面版”,你将保留所需的屏幕尺寸,但会恢复鼠标事件。


这是我在开发Adobe CEP扩展时的情况! - Vasily Hall

4
问题在于特定的Chrome标签页。我不知道为什么会出现问题,但刷新没有改变任何东西——但当我在隐身窗口和新的 Chrome 窗口中加载网站时,问题就得到了解决。
唯一不同的是,我遇到问题的标签页已经打开了很长时间(约 3-4 小时)。我不知道这会影响什么,但如果有人有什么想法,我很乐意听听。

我刚遇到了同样的问题,如果我没有看到这个,我会浪费很多时间。非常奇怪的问题(浏览器bug?)。 - Appleshell
有时候清除缓存会有所帮助。只需打开控制台,然后右键单击刷新按钮并选择“清空缓存并强制重新加载”。我通常都这么做 :) - GeekPeek

2
您的本地代码运行良好。通过文档获取事件,如下所示:
$(document).on('mousemove', '.slick-slide', function(){ console.log('mousemove'); });

在网站上查看。

是的,我的本地代码确实起作用了,但当我将其放在网站上时就无法工作了。 - haydenwagner
这是浏览器的一些问题 --- 我仍然不知道是什么问题,但我在隐身标签页中尝试了一下,鼠标事件正常工作,然后我只是在一个新的普通 Chrome 标签页中它正常工作。只有在打开了三个小时或更长时间的 Chrome 标签页中才会出现问题。 - haydenwagner

1

如果您在 Chrome Dev 工具上选择了响应式模式,那么这似乎是一个问题。

您可以通过像这样切换到桌面模式来轻松解决它:

1. 尝试切换设备工具栏

切换设备工具栏

2. 手动切换到桌面模式

添加设备类型 选择桌面


虽然这个链接可能回答了问题,但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改,仅有链接的答案可能会失效。- 来自审查 - Webdeveloper_Jelle

1

大多数遇到这种情况的开发者都会打开开发者控制台,在Chrome浏览器中,这通常会将您的输入切换为触摸模式,在这种模式下,与桌面上一样,没有恒定的光标。

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

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接