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

Question

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

hay*_*ner 5 html javascript events mouseevent mousemove

我正在尝试使用 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pet*_*son 9

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

如果您正在使用 Chrome 开发工具进行测试（例如）并且您有一个处于活动状态的设备配置文件，那么 Chrome 将模拟触摸交互而不发送 mousemove 事件（对于浏览器无法判断的手机/平板电脑就是这种情况如果它没有触摸屏幕，则用户的手指）。

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

归档时间：	9 年，9 月前
查看次数：	6839 次
最近记录：	5 年，1 月前