JavaScript鼠标事件入门

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

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

​ 

​

✨ 前言

        鼠标事件是Web开发中最为重要的交互方式之一。本文将带领大家入门常用的鼠标事件,包括点击、移动、悬停等,并通过具体示例介绍如何在JavaScript中使用它们。

        掌握鼠标事件可以让我们制作更优质的交互界面,为用户提供更流畅的体验。相信通过本文的学习,大家一定可以熟练使用各种鼠标事件来丰富网页交互。现在就让我们开始鼠标事件之旅吧!

​

✨ 正文

本文介绍最常用的鼠标事件,包括点击、移动、悬停等。

点击事件

• mousedown - 鼠标按下时触发
• mouseup - 鼠标按键释放时触发
• click - 完成一次按下与释放时触发

  btn.onmousedown = () => alert('Down');
  btn.onmouseup = () => alert('Up');
  btn.onclick = () => alert('Click');

鼠标移动

跟踪鼠标移动:

document.onmousemove = event => {
  let x = event.clientX;
  let y = event.clientY;
};

 

悬停事件

• mouseover - 鼠标移入元素范围内时触发
• mouseout - 鼠标移出元素时触发

btn.onmouseover = () => alert('Mouse over me!'); 
btn.onmouseout = () => alert('Mouse left me!');

事件对象属性

事件对象包含鼠标信息:

• clientX/clientY - 鼠标坐标
• target - 事件目标元素

button.onclick = function(event) {
  // 鼠标相对于按钮的坐标
  let x = event.clientX - button.getBoundingClientRect().left;
  let y = event.clientY - button.getBoundingClientRect().top;
};

 

✨ 结语

        鼠标作为一种重要的输入方式,其事件为我们提供了丰富的交互可能性。本文详细介绍了点击、移动、悬停等常用鼠标事件及其在JavaScript中的用法。

        希望这篇博客可以增进大家对鼠标事件的理解,也可以用作查阅参考。如果出现任何问题,欢迎在评论区留言,我很乐意与大家进行技术交流。

  

​