[SOLVED] Mousemove event not firing on page element or document

Mousemove event not firing on page element or document

I am trying to use the js slider slick, but the default 'draggable' option does not work when I include the slider code on my site. More specifically, I cannot capture any mousemove events on the slide div, or on the document in my webpage (Chrome).

When run the code locally I have no problem observing the 'mouseup', 'mousemove', and 'mouseup' events, but when I put the slider code into the webpage I am only able to observe the 'mouseup' and 'mousedown' events.

Below is the working local code. If you run it, it will log the mousedown, mousemove, and mouseup events inside the slider div.

When I move the same code to the website I am not able to observe any mousemove events coming from the slider div, or from the document at all. Could there be some js running already that would completely prevent mousemove events from being fired by the page?

<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>

Solution

Not sure if this answers your specific question, but it might be helpful for others that turn up here.

If you're testing using Chrome dev tools (say) and you have a device profile active, then Chrome will emulate touch interaction and not send mousemove events (as would be the case for a phone/tablet where the browser can't tell when the users finger if it's not touching the screen).

If you change the device type from (eg) "Desktop (touch)" to just "Desktop", you'll keep the desired screen size, but gain back the mouse events.