今天在用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');
           
        })
    })

这是修改完的代码