当鼠标离开框架时，jQuery 'on mousemove‘不会滑动
当鼠标离开框架时，jQuery 'on mousemove‘不会滑动
提问于 2014-04-09 11:57:17
我想用jquery做一个滑块。但当我将它拉出帧"silderContainer“时，”滑块“将停止移动，当它通过"sliderContainer”返回时，“滑块”将再次移动。我想要的是当我把鼠标拉出框架时，“滑块”如何仍然在移动。
代码如下：
<style>
body{
padding:60px;
height:800px;
}
.sliderContainer{
//position:relative;
width:200px;
background-color:#CCC;
height:30px;
margin-top:16px;
cursor:pointer;
}
.slider{
position:absolute;
width:50px;
height:30px;
background:#fa565a;
float:right;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on('ready', function(){
function moveSlider(e){
e.preventDefault();
var pos = $(e.currentTarget).offset()
, posX = e.pageX - pos.left;
if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
$('.slider').css('width', posX+'px');
}
}
$('.sliderContainer').on('mousedown', function(e){
moveSlider(e);
$(this).on('mousemove', function(e){
moveSlider(e);
});
}).on('mouseup', function(){
$(this).off('mousemove');
});
});
</script>
<div class='sliderContainer'>
<div class='slider'></div>
</div>
</body>
任何帮助都将不胜感激。谢谢。
回答 1
Stack Overflow用户
发布于 2014-04-09 12:06:40
这是因为目标元素是.sliderContainer。所以你可以这样想--当你在一个网页上，当你在任何一个普通的表单按钮上按住你的鼠标，然后把你的鼠标移进移出它，焦点就会消失在对象上。
http://www.w3schools.com/html/html_forms.asp
查找“提交按钮”部分并对其进行测试。
您的逻辑所说的是，当焦点在容器元素上并且注册了鼠标移动事件时，javascript可以响应它。但是一旦失去了焦点(例如。移出元素的区域)，那么它就不能再响应了。
与将事件附加到容器元素本身不同，您可以将它们注册到文档或窗口，或者后面有更大空间的另一个对象，以便保持焦点。
下面是一个例子：Losing MouseUp event if releasing not over the same element
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22952497
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号