html5中的鼠标事件以及鼠标事件属性

鼠标事件

先列出html5中鼠标常见的一系列事件：

事件名称	描述
onclick	当单击鼠标时运行脚本
ondblclick	当双击鼠标时运行脚本
ondrag	当拖动元素时运行脚本
ondragend	当拖动操作结束时运行脚本
ondragenter	当元素被拖动至有效的拖放目标时运行脚本
ondragleave	当元素离开有效拖放目标时运行脚本
ondragover	当元素被拖动至有效拖放目标上方时运行脚本
ondragstart	当拖动操作开始时运行脚本
ondrop	当被拖动元素正在被拖放时运行脚本
onmousedown	当按下鼠标按钮时运行脚本
onmousemove	当鼠标指针移动时运行脚本
onmouseout	当鼠标指针移出元素时运行脚本
onmouseover	当鼠标指针移至元素之上时运行脚本
onmouseup	当松开鼠标按钮时运行脚本
onmousewheel	当转动鼠标滚轮时运行脚本
onscroll	当滚动元素滚动元素的滚动条时运行脚本

下面的例子实现了部分鼠标事件：

运行以上代码，可以发现如下几个问题：

• ondblclick表示双击，触发这个函数时，同时也执行了两次 onclick 鼠标单击函数。
  在上述例子中，双击元素会输出： 我被点了一下！我被点了一下！我被点了两下！
• onclick事件是 onmousedown事件和onmouseup事件的结合体。实际上onclick事件是在onmouseup事件触发后再触发；
  单击元素，先输出： 我的鼠标松开了！，再输出：我被点了一下！

---

鼠标事件属性

在使用鼠标事件函数时可以往函数中传入event参数，event代表鼠标的事件对象。
例如：

运行页面，单击元素，在控制台中可见：

MouseEvent对象

对象中常见属性介绍：

属性	描述
clientX	返回鼠标位置相对于浏览器窗口左上角的水平坐标
clientY	返回鼠标位置相对于浏览器窗口左上角的垂直坐标
offsetX	返回鼠标位置距离事件作用对象左侧边缘的水平距离
offsetY	返回鼠标位置距离事件作用对象左侧边缘的垂直距离
pageX	返回鼠标位置距离文档左侧边缘的距离
pageY	返回鼠标位置距离文档顶部的距离
altKey	鼠标事件发生时是否按下了alt键，返回为bool值
ctrlKey	鼠标事件发生时是否按下了ctrl键，返回为bool值
metaKey	鼠标事件发生时是否按下了meta键，返回为bool值
shiftKey	鼠标事件发生时是否按下了shift键，返回为bool值

其他的可以自己点开看看，输出试试；
举例：

结果如下：