Obeta

JavaScript中的Mouse事件解析

JS中挺多监听事件的,其中一种就是鼠标的监听了,这次就记录一下各个事件的区别以及使用吧.

鼠标事件也就是通过鼠标触发的事件,常见的有click, dblclick, mouseup, mouseleave等等...

介绍

这里只介绍mouse开头的几个事件,毕竟其它的用的多,基本上没人不知道,多说也无益.

  • mousedown
  • mouseup
  • mouseenter
  • mouseleave
  • mousemove
  • mouseout
  • mouseover
  • mousewheel

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);
});

测试值:

滚动的时候可以看到上面的值会改变.

引用

个人随笔记录,内容不保证完全正确,若需要转载,请注明作者和出处.