微信登录

事件对象 - 事件对象属性 - 鼠标事件属性

前端 - Javascript 《事件对象 - 事件对象属性 - 鼠标事件属性》

在前端开发中，JavaScript 赋予了网页交互性，而事件对象则是实现这些交互的关键。其中，鼠标事件属性为我们提供了丰富的信息，帮助我们根据用户的鼠标操作做出不同的响应。本文将深入探讨事件对象中的鼠标事件属性。

什么是事件对象和鼠标事件属性

当事件触发时，浏览器会创建一个事件对象（Event Object），该对象包含了与该事件相关的各种信息。对于鼠标事件，事件对象中包含了许多与鼠标操作相关的属性，这些属性可以告诉我们鼠标的位置、按钮状态等信息。

常见的鼠标事件属性

1. clientX 和 clientY

  • 含义：这两个属性表示鼠标指针相对于浏览器窗口可视区域的水平和垂直坐标，不包含滚动条的偏移量。
  • 示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <div id="testDiv" style="width: 200px; height: 200px; background-color: lightblue;">
  10.         点击我查看鼠标位置
  11.     </div>
  12.     <script>
  13.         const div = document.getElementById('testDiv');
  14.         div.addEventListener('click', function (event) {
  15.             console.log(`鼠标相对于窗口的水平位置: ${event.clientX}px`);
  16.             console.log(`鼠标相对于窗口的垂直位置: ${event.clientY}px`);
  17.         });
  18.     </script>
  19. </body>
  21. </html>
  • 解释：当用户点击 div 元素时，会在控制台输出鼠标相对于浏览器窗口可视区域的水平和垂直坐标。

2. pageX 和 pageY

  • 含义：这两个属性表示鼠标指针相对于整个文档的水平和垂直坐标，包含了滚动条的偏移量。
  • 示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <style>
  7.         body {
  8.             height: 2000px;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="testDiv" style="width: 200px; height: 200px; background-color: lightgreen;">
  15.         点击我查看鼠标位置
  16.     </div>
  17.     <script>
  18.         const div = document.getElementById('testDiv');
  19.         div.addEventListener('click', function (event) {
  20.             console.log(`鼠标相对于文档的水平位置: ${event.pageX}px`);
  21.             console.log(`鼠标相对于文档的垂直位置: ${event.pageY}px`);
  22.         });
  23.     </script>
  24. </body>
  26. </html>
  • 解释：通过设置 body 的高度，使页面出现滚动条。当用户点击 div 元素时，会在控制台输出鼠标相对于整个文档的水平和垂直坐标，即使页面滚动了，该坐标也会包含滚动条的偏移量。

3. screenX 和 screenY

  • 含义：这两个属性表示鼠标指针相对于用户屏幕的水平和垂直坐标。
  • 示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <div id="testDiv" style="width: 200px; height: 200px; background-color: lightcoral;">
  10.         点击我查看鼠标位置
  11.     </div>
  12.     <script>
  13.         const div = document.getElementById('testDiv');
  14.         div.addEventListener('click', function (event) {
  15.             console.log(`鼠标相对于屏幕的水平位置: ${event.screenX}px`);
  16.             console.log(`鼠标相对于屏幕的垂直位置: ${event.screenY}px`);
  17.         });
  18.     </script>
  19. </body>
  21. </html>
  • 解释：当用户点击 div 元素时，会在控制台输出鼠标相对于用户屏幕的水平和垂直坐标。

4. button

  • 含义：该属性表示鼠标点击时按下的按钮，不同的值对应不同的按钮。
值 对应的按钮
0 主按钮（通常是左键）
1 中间按钮（如果有的话）
2 次按钮（通常是右键）
  • 示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <div id="testDiv" style="width: 200px; height: 200px; background-color: lightyellow;">
  10.         点击我查看按下的按钮
  11.     </div>
  12.     <script>
  13.         const div = document.getElementById('testDiv');
  14.         div.addEventListener('mousedown', function (event) {
  15.             let buttonName;
  16.             switch (event.button) {
  17.                 case 0:
  18.                     buttonName = '左键';
  19.                     break;
  20.                 case 1:
  21.                     buttonName = '中间键';
  22.                     break;
  23.                 case 2:
  24.                     buttonName = '右键';
  25.                     break;
  26.             }
  27.             console.log(`你按下的是: ${buttonName}`);
  28.         });
  29.     </script>
  30. </body>
  32. </html>
  • 解释：当用户在 div 元素上按下鼠标按钮时，会在控制台输出按下的是哪个按钮。

总结

鼠标事件属性为我们提供了丰富的信息，让我们能够根据用户的鼠标操作做出更加灵活和精准的响应。通过 clientX、clientY、pageX、pageY、screenX、screenY 可以获取鼠标的位置信息，而 button 属性可以判断用户按下的是哪个鼠标按钮。合理运用这些属性，可以大大提升网页的交互性和用户体验。

希望通过本文的介绍，你对 JavaScript 中事件对象的鼠标事件属性有了更深入的理解。在实际开发中，不妨多尝试使用这些属性，创造出更加精彩的交互效果。

事件对象 - 事件对象属性 - 鼠标事件属性