JavaScript鼠标移动事件

🧑‍🎓 个人主页：《爱蹦跶的大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();
  }  
})

• 通过判断相关元素是否为后代来模拟 enter/leave 事件。

 

✨ 结语

        理解不同鼠标事件的触发规则,可以防止事件混淆,也让我们可以选择最符合需求的事件。

        本文不仅区分了 mousemove、mouseover 和 mouseenter 的区别,也介绍了事件对象的坐标属性,以及如何兼容老版本 IE 浏览器。希望通过这个博客,大家可以彻底掌握各种鼠标事件的使用场景。如果还有疑问,欢迎在评论区讨论。

    

​