今天在用jq做的元素跟随鼠标移动的时候，发现当鼠标快速移动的时候，元素会脱落。
以下是代码
$(‘.notes-num-tips‘).mousedown(function(e){
var dx = e.offsetX;
var dy = e.offsetY;
console.log(e);
$(document).mousemove(function(e){
//console.log(e.pageX-dx);
$(‘.notes-num-tips‘).css({
left:e.pageX-dx,
top:e.pageY-dy
})
})
$(‘.notes-num-tips‘).mouseup(function(){
$(document).off(‘mousemove‘);
})
})
其实代码是没问题的，记得mousemove事件是绑定在document上面的，不然快速移动还是会脱落。但是我上面本来就是绑定在document上面的。
后面发现造成这个的原因是iframe嵌套。解决这个的办法就是当移动的时候在最上层铺一层遮罩层，该遮罩层的权重要比iframe重，不然没用，要比移动元素低，不然无法取消事件。
$(‘.notes-num-tips‘).mousedown(function(e){
var dx = e.offsetX;
var dy = e.offsetY;
console.log(e);
$(".drag-div").removeClass("hide");
$(document).mousemove(function(e){
//console.log(e.pageX-dx);
$(‘.notes-num-tips‘).css({
left:e.pageX-dx,
top:e.pageY-dy
})
})
$(‘.notes-num-tips‘).mouseup(function(){
$(".drag-div").addClass("hide");
$(document).off(‘mousemove‘);
})
})
这是修改完的代码
原文：https://www.cnblogs.com/linzewei27/p/12745207.html