Mousemove event not firing on page element or document
Question
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>
5 answers
solution1
9 ACCPTED 2018-11-20 03:29:15
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.
solution2
4 2016-06-09 22:16:06
The problem was that specific chrome tab. I don't know why I was having issues, but refreshing it didn't change anything--but when I loaded the site in an incognito window and a new chrome window it fixed it.
The only thing that was different between the tabs was that the one I was having the issue in had been open for a much longer time (~3-4 hours). I don't know why that would affect anything, but I would love to hear what someone thought if they had any ideas.
solution3
2 2016-06-09 16:59:39
Your local code works fine. Grab the event by the document like
$(document).on('mousemove', '.slick-slide', function(){ console.log('mousemove'); });
Check it out in the website.
solution4
1 2021-01-24 22:40:54
Most devs experiencing this have their dev console open, and in Chrome this usually changes your input to be in touch mode, where there is no constant cursor as there is on desktops.
Either make your code have different behavior for touch input to get a desired result, or you can add a device type to your dev console session by changing the options shown in the attached screenshot.
solution5
0 2022-08-03 10:16:32
This seems to be an issue if you have a responsive mode selected on your Chrome Dev Tools
You can easily resolve it by switching to Desktop like this:
1. Try toggle Device toolbar
2. Switch to Desktop mode manually
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.