jquery 或js关于鼠标单击和拖拽的区别

Posted 2023-03-09

单击是鼠标按下，抬起（click相当于mousedown+mouseup）
拖拽是鼠标按下，移动，抬起（mousedown+mousemove+mouseup） 参考技术A mousedown后若mousemove了不算click 参考技术B 鼠标单击，只是一个简单的鼠标点击动作。而鼠标拖拽比鼠标单击要复杂一点，它包含了：鼠标点击、鼠标拖拽、鼠标弹起。

另附js拖拽效果的实现原理：
大致分为三步：
①当鼠标在模态窗体头部点下(mousedown)时，立即给document绑定mousemove和mouseup事件
②当鼠标没有弹起时(没有mouseup)时，若鼠标在窗体内移动时，激活mouseMove函数，通过计算鼠标移动的距离来及时整个窗体的位置移动。
③当鼠标弹起(mouseup)时，调用mouseUp事件,将document上绑定的mousemove事件和mouseup事件解除绑定。