鼠标事件也就是通过鼠标触发的事件,常见的有
click,dblclick,mouseup,mouseleave等等...
介绍
这里只介绍mouse开头的几个事件,毕竟其它的用的多,基本上没人不知道,多说也无益.
mousedownmouseupmouseentermouseleavemousemovemouseoutmouseovermousewheel
mousewheel这个事件比较特殊,只有 Firefox 不支持,它有自己的实现DOMMouseScroll,为什么不支持我查了一下,官网解释说mousewheel也不是标准里的,所以就没支持...
另外提一下 Firefox 真性情啊,很多地方严格按照规范执行,比如说记得之前 Friefox 是不允许下面这种方式:
<button>
<a href="https://obeta.me">Link</a>
</button>
<a href="https://obeta.me">
<button>Link</button>
</a>上面这两种方式都是w3c规范所不允许的:
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).
也就是说可交互的标签是不允许不推荐嵌套另一个可交互标签的,个人猜测是由于为了照顾可访问性而采取的举措,否则屏幕阅读器可能不知道如何读这嵌套部分,可能会:"链接,按钮,Link",这听起来非常令人困惑
mousedown,mouseup
这两个事件很好理解,鼠标的点击有两个动作,分别为down,up,也就是我们平时点击鼠标那样,按下和松开.
mouseenter,mouseover
当指针移动到监听的元素上时就会触发的事件.
很多人都会把它跟mouseover弄混,时常分不清它们两个有什么关系,因为有时候确实能用他们两个实现同一种需求或者功能.
其实确实是差不多,只是有一个地方不太一样,就是mouseenter不会冒泡,当你移动指针到子元素上时也不会再次触发事件.
总结:
mouseover: 鼠标穿过监听元素及监听元素的子元素的时候也会触发.mouseenter: 只有在鼠标指针穿过监听元素时才会触发.
mouseleave,mouseout
当指针移出监听的元素上时就会触发的事件.
这两个同样有时候傻傻分不清,同上面那两个一样的区别,就是会不会冒泡.
总结:
mouseleave: 只有鼠标移出监听元素的时候才会触发.mouseout: 鼠标移出监听元素及监听元素的子元素的时候也会触发.
mousewheel
对于mousewheel绑定事件的时候需要做兼容处理,可以使用以下代码:
const on = (function() {
const mousewheelevt = /Firefox/i.test(navigator.userAgent)
? 'DOMMouseScroll'
: 'mousewheel'; // FF doesn't recognize mousewheel as of FF3.x
if (document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(
event === 'mousewheel' ? mousewheelevt : event,
handler,
false
); //WC3 browsers
}
};
}
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent(
`on${event === 'mousewheel' ? mousewheelevt : event}`,
handler
); //if IE (and Opera depending on user setting)
}
};
})();
on(document.getElementById('you'), 'mousewheel', function(e) {
// 其它浏览器均是向上滚动为正值(+120)、向下滚动为负值(-120)。而Firefox则是向上滚动为负值(-5)，向下滚动为正值(+5)。
console.log(e.wheelDelta || -e.detail * 24);
});测试值:
滚动的时候可以看到上面的值会改变.