鼠标事件

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

事件名称

描述

onclick

当单击鼠标时运行脚本

ondblclick

当双击鼠标时运行脚本

ondrag

当拖动元素时运行脚本

ondragend

当拖动操作结束时运行脚本

ondragenter

当元素被拖动至有效的拖放目标时运行脚本

ondragleave

当元素离开有效拖放目标时运行脚本

ondragover

当元素被拖动至有效拖放目标上方时运行脚本

ondragstart

当拖动操作开始时运行脚本

ondrop

当被拖动元素正在被拖放时运行脚本

onmousedown

当按下鼠标按钮时运行脚本

onmousemove

当鼠标指针移动时运行脚本

onmouseout

当鼠标指针移出元素时运行脚本

onmouseover

当鼠标指针移至元素之上时运行脚本

onmouseup

当松开鼠标按钮时运行脚本

onmousewheel

当转动鼠标滚轮时运行脚本

onscroll

当滚动元素滚动元素的滚动条时运行脚本

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

div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;}

function myclick(){

console.log("我被点了一下！")

}

function mydblclick(){

console.log("我被点了两下！")

}

function mymouseEnter(){

console.log("我的鼠标移进来了！")

}

function mymousesDown(){

console.log("我的鼠标点下去了！")

}

function mymouseUp(){

console.log("我的鼠标松开了！")

}

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

ondblclick表示双击，触发这个函数时，同时也执行了两次 onclick 鼠标单击函数。

在上述例子中，双击元素会输出： 我被点了一下！我被点了一下！我被点了两下！

onclick事件是 onmousedown事件和onmouseup事件的结合体。实际上onclick事件是在onmouseup事件触发后再触发；

单击元素，先输出： 我的鼠标松开了！，再输出：我被点了一下！

鼠标事件属性

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

例如：

div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;}

function myclick(event){

console.log(event)

}

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

MouseEvent对象

对象中常见属性介绍：

属性

描述

clientX

返回鼠标位置相对于浏览器窗口左上角的水平坐标

clientY

返回鼠标位置相对于浏览器窗口左上角的垂直坐标

offsetX

返回鼠标位置距离事件作用对象左侧边缘的水平距离

offsetY

返回鼠标位置距离事件作用对象左侧边缘的垂直距离

pageX

返回鼠标位置距离文档左侧边缘的距离

pageY

返回鼠标位置距离文档顶部的距离

altKey

鼠标事件发生时是否按下了alt键，返回为bool值

ctrlKey

鼠标事件发生时是否按下了ctrl键，返回为bool值

metaKey

鼠标事件发生时是否按下了meta键，返回为bool值

shiftKey

鼠标事件发生时是否按下了shift键，返回为bool值

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

举例：

div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;}

function myclick(event){

console.log(event)

console.log("触发事件的dom元素的ID："+event.target.id)

console.log("事件类型："+event.type)

}

结果如下：