我正在尝试使用js轮播插件slick,但是当我将轮播代码放到我的网站上时,默认的“可拖动”选项无法正常工作。更具体地说,在网页中我无法捕获滑块div或文档中的任何mousemove事件(Chrome)。
在本地运行代码时,我没有问题观察到'mouseup'、'mousemove'和'mouseup'事件,但是当我将轮播代码放入网页时,我只能观察到'mouseup'和'mousedown'事件。
下面是可工作的本地代码。如果你运行它,它会记录日志在轮播div内的mousedown、mousemove和mouseup事件。 当我将相同的代码移至网站时,我无法观察从滑块div或文档中发出的任何mousemove事件。可能已经有一些js在运行,完全阻止了页面发出mousemove事件吗?
下面是可工作的本地代码。如果你运行它,它会记录日志在轮播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