html点击事件页面不滚动,jQuery实现拖动，且拖动时不触发点击事件

jQuery实现拖动是网上抄的代码，但发现有一个JavaScript拖动时触发点击事件的BUG，让基友老嫖给修复了。

#move{

width: 200px;

height: 200px;

background-color: red;

position: absolute;

cursor: move;

}

Hello World！

$('#move').on('mousedown', function(e) { //鼠标按下

// 判断一下这个按下是点击还是拖动

var isClick = true;

$(document).on('mousemove', (e) => {//鼠标移动

let left = e.clientX - $(this).width() / 2//计算元素left值

let top = e.clientY - $(this).height() / 2//计算元素top值

top = suan(top, 0, $(document).innerHeight() - $(this).height())//调用封装的方法

left = suan(left, 0,$(document).innerWidth() - $(this).width())//调用封装的方法

$(this).css({ //给盒子设置坐标

left,

top

})

//拖动后，把isClick设为false，后面就不会执行点击事件

isClick = false;

e.preventDefault();

})

$(document).on('mouseup', (e) => {//鼠标抬起

//当isClick为true时，就执行点击事件

if( isClick ){

msgboxurl()

}

$(document).off('mousemove mouseup')//移除鼠标移动、鼠标抬起事件

})

})

function suan(o, min, max) { //重复封装

o < min ? o = min : o > max ? o = max : ''//限制出界

return o

}

function msgboxurl(){

alert("点击效果");

}