JavaScript鼠标移动事件

news2024/9/21 0:55:35

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

✨ 前言

鼠标移动是用户界面中非常重要的交互行为。学习区分不同的鼠标移动事件,可以帮助我们更准确地处理鼠标活动,创建出色的用户体验。

本文将详细介绍 mousemove、mouseover/out 以及 mouseenter/leave 事件之间的区别,并通过示例说明在何种场景下使用每个事件。准备好学习后,你将能够自由控制各种鼠标事件。

✨ 正文

本文介绍 mousemove,mouseover/mouseout,mouseenter/mouseleave 的区别。

mousemove

当鼠标移动时重复触发。

ball.onmousemove = function(event) {
  let newTop = event.clientY - ball.clientHeight / 2;
  let newLeft = event.clientX - ball.clientWidth / 2;

  ball.style.left = newLeft + 'px';
  ball.style.top = newTop + 'px';
};

mouseover/mouseout

当鼠标穿过任意子元素也会触发:

<div>
  <button>Button</button>
</div>

<script>
div.onmouseover = () => alert(`Mouse over DIV`);
div.onmouseout = () => alert(`Mouse left DIV`);  
</script>

鼠标移入移出 <button> 也会触发 <div> 的事件。

mouseenter/mouseleave

只有穿过最外层元素自身边界时才触发:

div.onmouseenter = () => alert(`Entered DIV`);
div.onmouseleave = () => alert(`Left DIV`);

内部元素移动不影响。

这更符合实际需要。

嵌套 div

对于嵌套 <div>,bubbleeful 事件同样适用,例如:

<div>
  <div>...</div>
</div>

<script>
  // 外层 DIV 的事件只在 "自己的" 边界出发
  outer.onmouseenter = () => alert(`Enter outer DIV`);
  outer.onmouseleave = () => alert(`Leave outer DIV`);
</script>

事件对象属性

鼠标事件对象包含鼠标位置信息:

pageX/pageY - 相对于文档的坐标

clientX/clientY - 相对于视口的坐标

elem.onmousemove = function(e) {
  // e.pageX, e.pageY是基于文档
  // e.clientX, e.clientY是基于视口  
};

client坐标会随滚动变化,page坐标保持不变。

阻止冒泡

所有鼠标事件默认会冒泡。如果需要阻止冒泡可以使用:

elem.onmouseover = function(e) {
  e.stopPropagation();
};

这可以实现比如 hover 效果时防止触发底层事件。

跨浏览器问题

mouseenter/leave 事件不是 IE8 以下版本支持,需要通过 mouseover/out 兼容:

function handleEnter() {
  // 鼠标进入时处理函数  
}

elem.addEventListener('mouseover', function(e) {
  if (!isDescendant(elem, e.relatedTarget)) {
    handleEnter();
  }  
})