疯狂移动鼠标对话框跟不上卡顿，需要用函数节流解决吧？

请尽量清晰完善地描述问题，以便大家给予专业的回复。

西兰花伟大炮 2018-01-14

收起

4回答

妮可妮可妮_ 2018-10-06 10:18:07

冒泡机制，即子集的事件会一级一级往父级上边传递，如果移动太快，可能会出现脱离div的情况，那么就需要把事件绑定在能够涵盖所有子集的父级身上，使得事件冒泡到父级，document是个很好的选择，无论鼠标在怎么移动，始终是在文档范围之内，参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.box {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
background: #FBF2BD;
padding: 5px;
text-align: center;
top: 20px;
left: 20px
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var mFlag = false;
var divX, divY;
$(".box").bind("click mousedown", function (e) {
if (event.type == 'click') {
} else if (event.type == 'mousedown') {
mFlag = true;
divX = e.pageX - parseInt($(".box").css("left"));
divY = e.pageY - parseInt($(".box").css("top"));
}
});
$(document).mousemove(function (e) {
if (mFlag) {
$(".box").css({ top: e.pageY - divY, left: e.pageX - divX });
$('#mx').text(e.pageX); $('#my').text(e.pageY);
$('#cx').text(divX); $('#cy').text(divY);
$('#dx').text(e.pageX - divX); $('#dy').text(e.pageY - divY);
}
}).mouseup(function () {
mFlag = false;
$(".box").fadeTo("fast", 1);
});
})
</script>
</head>
<body>
<div class="box" id="box">移动</div>
</body>

</html>

祝学习愉快！

收起回答

离离钟 #1

1，请问是因为事件往父级上级传递的时间赶不上鼠标移动的时间，所以才出现这种鼠标脱离div的情况吗？ 2，如果在整个文档内设置了移动事件，那鼠标只要在文档内移动，就一直都在触发事件，浏览器不是很累吗。。？ 3，在整个文档内设置了移动事件，就不用向父级传递事件了，因为文档是最上级？就没有那么多时间花费在向父级传递事件上，鼠标也不容易跑出div外，我这样理解对么。。？问题有点多。谢谢老师啦

2018-10-16 10:09:36
离离钟 #2

第二小问可以忽略，我自己想通了。还有其他两问

2018-10-16 11:27:09
妮可妮可妮_ 回复离离钟 #3

1. 子集的事件会一级一级往父级上边传递，如果移动太快，可能会出现脱离div的情况,同学是可以这样理解的 2. 作用在document是因为无论鼠标在怎么移动，始终是在文档范围之内,把事件绑定在document上,使得事件冒泡到父级.就不会发生被拖动元素跟不上的情况祝学习愉快!

2018-10-16 11:48:15

点开查看后面2条评论

慕数据7542861 2018-10-05 16:26:29

你要的疯狂拖动（手动滑稽）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>传统拖拽</title>
<style>
.dialog{
position: absolute;
top: 50px;
left: 100px;
width: 200px;
}
.dialog .title{
background-color: #D7dEF0;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
cursor: move;
}
.dialog .content{
background-color: #f0f0f0;
height: 200px;
}
</style>
</head>
<body>
<div class="dialog" id="dialog">
<div class="title">title</div>
<div class="content"></div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
var dialog = $('#dialog');
var titleEle = $('#dialog .title');
var lastPoint = {};
var isMouseDown = false;

//使用事件委托
$(document).on('mousedown','div.title',function(e){
isMouseDown = true;
lastPoint.x = e.pageX;
lastPoint.y = e.pageY;
}).on('mousemove',function(e){
if(isMouseDown){

var currentLocationX = dialog.offset().left + (e.pageX - lastPoint.x);
var currentLocationY = dialog.offset().top + (e.pageY - lastPoint.y);
dialog.offset({top: currentLocationY,left: currentLocationX});

lastPoint.x = e.pageX;
lastPoint.y = e.pageY;
}
}).on('mouseup','div.title',function(){
isMouseDown = false;
lastPoint = {};
});

</script>
</body>
</html>

收起回答