Question

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

当在本地运行代码时，我没有问题观察'mouseup'，'mousemove'和'mouseup'事件，但当我将滑块代码放入网页时，我只能观察'mouseup'和' mousedown'事件。

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

当我将相同的代码移动到网站时，我无法观察到来自滑块div或文档的任何鼠标移动事件。可能有一些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>

Answer 1

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

标签之间唯一不同的是我遇到问题的那个已经打开了很长时间（约3-4个小时）。我不知道为什么会对任何事情产生影响，但我很想听听有人在想什么时会有什么想法。

Answer 2

您的本地代码运行正常。通过像

这样的文件抓住事件

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

在网站上查看。

Answer 3

不确定是否可以回答您的特定问题，但这可能对其他出现在此处的人有所帮助。

如果您正在使用Chrome开发工具进行测试（例如），并且设备配置文件处于活动状态，则Chrome将模拟触摸互动，并且不会发送鼠标移动事件（例如手机/平板电脑可以在其中进行浏览器操作的情况）不能告诉用户手指是否没有触摸屏幕。

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

Answer 4

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

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

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

4 个答案: