其他分享
首页 > 其他分享> > 解决鼠标快速移动的时候,跟随鼠标移动的元素会脱落。

解决鼠标快速移动的时候,跟随鼠标移动的元素会脱落。

作者:互联网

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

这是修改完的代码

 

标签:function,document,鼠标,notes,脱落,num,dx,tips,移动
来源: https://www.cnblogs.com/linzewei27/p/12745207.html