mouseout,mouseleave
1 .mouseout 鼠标指针离开绑定元素的任何子元素都会触发
2 .mouseleave 子元素不会触发
mouseover,mouseenter
1 .mouseover 子元素和被选元素鼠标进去都会触发事件
2 .mouseenter 子元素不会触发
mouse down,mouse up,click
1 .mouse down 鼠标按下的操作,左键或者右键时触发,不能通过键盘触发
2 .mouse up 鼠标抬起触发的动作,不能键盘触发
3 .click 按下+抬起的动作,表示激活。不仅仅表示鼠标点击,当焦点在该控件上,按回车也会激发此事件。
4 .在一个元素上相继触发mousedown,mouseup事件,才会触发click事件,两次click事件相继触发才会dbclick事件
5 .如果取消了mousedown,mouseup中的一个,click事件就不会被触发。直接或间接取消click事件,dbclick事件也不会触发
6 .
dbclick click
1 .dbclick:双击鼠标左键触发
2 .
事件触发顺序
1 .单击
1 .mousedown
2 .mouseup
3 .click
2 .双击
1 .mousedown
2 .mouseup
3 .click
4 .mousedown
5 .mouseup
6 .click
7 .dbclick
滚轮事件
1 .屏幕坐标位置:相对于整个电脑屏幕的位置。
2 .mousewheel事件可以在任何元素上面触发,最终会冒泡到document或者window对象。
1 .screenX,screenY:相对于整个电脑屏幕,不是浏览器窗口
2 .pageX,
3 .layerX:鼠标相较于当前坐标系的位置,如果触发元素没有设置绝对定位或相对定位,以页面为参考点。如果有,将改变参考坐标系,从触发元素盒子模型的border取余的左上角为参考点
4 .
2 .客户区坐标位置
1 .clientX,clientY:浏览器视口的特定位置,不包括滚动距离。
2 .鼠标指针在视口中的水平和垂直坐标
3 .在没有滚动的时候,pageX和clientX值是一样的
3 .兼容性
offsetX/offsetY: W3C- IE+ Firefox- Opera+ Safari+ chrome+
x/y: W3C- IE+ Firefox- Opera+ Safari+ chrome+
layerX/layerY: W3C- IE- Firefox+ Opera- Safari+ chrome+
pageX/pageY: W3C- IE- Firefox+ Opera+ Safari+ chrome+
clientX/clientY: W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
screenX/screenY :W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
触摸设备-ipad,iphone
1 .不支持dbclick事件,双击浏览器窗口会放大画面,而且没有办法改变该行为
2 .轻击会触发mouseover事件。如果这个操作导致页面发生变化,将不会在触发其他事件,如果屏幕没有因此变化,那么会依次触发mousedown,mouseup,click事件
3 .轻击不可单击元素不会触发任何事件。
4 .可点击元素是指那些单击可以产生默认操作的元素,链接,或者绑定了click事件处理程序的元素
5 .mousemove 也会触发mouseover,mouseout事件
6 .两个手指放在屏幕上且页面随着手指移动而滚动会触发mousewheel,scroll事件
7 .