88事件分类——鼠标事件

1、常用事件

鼠标事件是Web开发中最常用的一类事件。
例如，鼠标滑过时，切换Tab栏显示的内容；利用鼠标拖拽曳状态框，调整它的显示位置等，这些常见的网页效果都会用到鼠标事件。

2、鼠标拖曳特效

在Web开发中，为了提供良好的用户体验，经常会对页面中弹框提供可拖拽的特效。

编写HTML页面

编写CSS

鼠标拖拽原理

根据鼠标的移动位置来计算盒子的移动位置。首先，要通过CSS样式为盒子设置定位，否则即使通过JavaScript代码修改盒子的位置也无法完成移动。

盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。

处理鼠标按下事件

处理鼠标移动事件

最后一行代码是当用户在拖拽条的文字上快速拖动时，避免选中上面的文本。
为了使用户体验更好，在鼠标大幅度进行移动时，也能实现拖拽效果，故为document文档绑定鼠标移动事件。

处理释放鼠标按键的事件

用户松开鼠标按键后，依然可以进行拖拽。
故实现鼠标按钮松开后，弹框不再移动。

处理关闭弹框事件