|
深入理解DOM事件类型系列第一篇——鼠标事件
鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备。本文将详细介绍鼠标事件的内容
类型 鼠标事件共10类,包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave
复制代码 click当用户按下并释放鼠标按键或其他方式“激活”元素时触发 contextmenu可以取消的事件,当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单 dblclick当用户双击鼠标时触发 mousedown当用户按下鼠标按键时触发 mouseup当用户释放鼠标按键时触发 mousemove当用户移动鼠标时触发 mouseover当鼠标进入元素时触发。relatedTarget(在IE中是fromElement)指的是鼠标来自的元素 mouseout当鼠标离开元素时触发。relatedTarget(在IE中是toElement)指的是鼠标要去往的元素 mouseenter类似mouseover,但不冒泡。IE将其引入,HTML5将其标准化,但尚未广泛实现 mouseleave类似mouseout,但不冒泡。IE将其引入,HTML5将其标准化,但尚未广泛实现 复制代码 冒泡
页面上的所有元素都支持鼠标事件,除了mouseenter和mouseleave事件外,所有的鼠标事件都会冒泡
[注意]safari浏览器不支持mouseenter和mouseleave事件
复制代码
复制代码
复制代码
复制代码
顺序 【1】鼠标移入时,触发mouseover、mouseenter和mousemove事件
IE浏览器会先触发一次mousemove事件,再触发mouseover和mouseenter事件,再触发多次mousemove事件
而其他浏览器都是先触发mouseover和mouseenter事件,再触发多次mousemove事件
复制代码
还原
复制代码
【2】鼠标移出时,触发mousemove、mouseleave和mouseout事件
所有浏览器的顺序都是(1)mousemove、(2)mouseout和(3)mouseleave事件
复制代码
还原
复制代码
【3】双击鼠标时,触发mousedown、mouseup、click、dblclick事件
一般地,浏览器的顺序是(1)mousedown、(2)mouseup、(3)click、(4)mousedown、(5)mouseup、(6)click、(7)dblclick
但IE8-浏览器有一个小bug,在双击事件中,它会跳过第二个mousedown和click事件,顺序为(1)mousedown、(2)mouseup、(3)click、(4)mouseup、(5)dblclick
复制代码
还原
复制代码
【4】点击鼠标右键时,触发mousedown、mouseup、contextmenu事件
一般地,浏览器的顺序是(1)mousedown、(2)mouseup、(3)contextmenu
但safari浏览器有一个小bug,它不触发mouseup事件,顺序为(1)mousedown、(2)contextmenu
复制代码
还原
复制代码
【5】嵌套元素的移入移出时,触发mouseover、mouseenter、mouseleave、mouseout事件
从父级元素进入子级元素时,顺序为:(1)父级元素的mouseout、(2)子级元素的mouseover、(3)父级元素的mouseover、(4)子级元素的mouseenter
从子级元素进入父级元素时,顺序为:(1)子级元素的mouseout、(2)父级元素的mouseout、(3)子级元素的mouseleave、(4)父级元素的mouseover
复制代码
还原
复制代码
从上面的结果可以看出mouseover、mouseout和mouseleave和mouseenter事件的区别
1、mouseover、mouseout是冒泡的,而mouseleave和mouseenter是不冒泡的
2、从父级元素进入子级元素时,不会触发父级元素的mouseleave事件
3、从子级元素进入父级元素时,不会触发父级元素的mouseenter事件
事件对象
鼠标事件对象提供了丰富的信息,接下来将按照功能分类介绍
坐标位置 关于坐标位置,事件对象提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y这6对信息
clientX/Y与x/y
clientX/Y表示鼠标指针在可视区域中的水平和垂直坐标
x/y与clientX/Y相同,但有兼容问题。firefox浏览器不支持x/y,且IE7-浏览器把视口的左上角坐标设置为(2,2),其他浏览器则将(0,0)作为起点坐标,所以存在(2,2)的差距
复制代码
复制代码
screenX/Y
screenX/Y表示鼠标指针相对于屏幕的水平和垂直坐标
复制代码
复制代码
pageX/Y与layerX/Y
pageX/Y表示相对于页面的水平和垂直坐标,它与clientX/clientY的区别是不随滚动条的位置变化
layerX/Y与pageX/Y相同
复制代码
| | |