JS Mousemove|极客笔记

JS Mousemove

1. 概述

在 Web 开发中，鼠标移动事件（mousemove）是一种常见的用户交互方式。它可以被绑定到 HTML 元素上，并在用户移动鼠标时触发相应的操作。本文将详细介绍鼠标移动事件的相关知识，包括事件绑定、事件对象、兼容性处理以及实际应用中的示例代码。

2. 事件绑定

要监听鼠标移动事件，首先需要找到目标 HTML 元素，并将其绑定到相应的事件处理函数上。在 JavaScript 中，可以通过以下两种方式进行事件绑定：

2.1 HTML 属性绑定

一种简单的方式是通过 HTML 元素的属性直接指定事件处理函数。例如：

<div onmousemove="handleMouseMove(event)"></div>

在上述代码中，我们将 onmousemove 属性设置为 handleMouseMove(event)，表示鼠标移动时将调用 handleMouseMove 函数，并将事件对象作为参数传递给该函数。注意，在 HTML 属性中直接绑定事件处理函数时，函数名后面不需要加括号。

2.2 DOM API 绑定

另一种方式是通过 JavaScript 的 DOM API 进行事件绑定。我们可以通过 addEventListener 方法将事件监听器附加到目标元素上。例如：

const element = document.querySelector('div');
element.addEventListener('mousemove', handleMouseMove);

在上述代码中，我们首先通过 querySelector 方法找到一个 div 元素，然后使用 addEventListener 方法将 mousemove 事件监听器绑定到该元素上。

两种方式各有优缺点。HTML 属性绑定简单直观，但需要将 JavaScript 代码直接写在 HTML 文件中，不易维护和管理。而 DOM API 绑定则更为灵活，但需要JavaScript 代码进行绑定操作，稍显繁琐。

3. 事件对象

在事件处理函数中，可以通过事件对象（event object）获取鼠标移动事件的详细信息。事件对象会作为参数传递给事件处理函数，允许开发者读取和操作事件的各个属性。

下面是常用的事件对象属性和方法：

event.clientX：鼠标在页面上的水平坐标位置（相对于可视区域）。
event.clientY：鼠标在页面上的垂直坐标位置（相对于可视区域）。
event.pageX：鼠标在页面上的水平坐标位置（相对于整个页面）。
event.pageY：鼠标在页面上的垂直坐标位置（相对于整个页面）。
event.target：事件的目标元素，即触发事件的 HTML 元素。
event.preventDefault()：阻止事件的默认行为。

以下是一个示例代码，演示如何利用事件对象获取鼠标移动事件的坐标位置：

function handleMouseMove(event) {
  console.log('X:', event.clientX);
  console.log('Y:', event.clientY);
}

const element = document.querySelector('div');
element.addEventListener('mousemove', handleMouseMove);

在上述示例中，当鼠标在页面上移动时，会在控制台打印出鼠标的 X 坐标和 Y 坐标。

4. 兼容性处理

不同浏览器对于鼠标移动事件的支持并不完全一致，因此在编写跨浏览器兼容的代码时，需要考虑到这些差异。下面将介绍一种常用的兼容性处理方法。

function handleMouseMove(event) {
  event = event || window.event;  // 兼容性处理
  const x = event.clientX || event.pageX;
  const y = event.clientY || event.pageY;

  console.log('X:', x);
  console.log('Y:', y);
}

const element = document.querySelector('div');
element.addEventListener('mousemove', handleMouseMove);

在上述示例中，我们首先使用逻辑或运算符 || 判断 event 是否存在。如果存在，则直接使用 event；如果不存在，则使用 window.event，这是 IE 浏览器中的特殊对象。

接下来，我们分别使用逻辑或运算符 || 判断 clientX 和 pageX 是否存在。这是因为不同浏览器使用不同的属性名来表示鼠标的 X 坐标。如果 clientX 存在，则使用 clientX；如果不存在，则使用 pageX。

同样的，我们也可以使用逻辑或运算符 || 判断 clientY 和 pageY 是否存在，从而获得鼠标的 Y 坐标。

经过以上兼容性处理，我们可以更好地适配不同浏览器，并获得正确的事件对象属性值。

5. 实际应用

鼠标移动事件在实际应用中有广泛的应用场景，例如图像剪裁、拖拽操作以及动画效果等。

以下是一个基于鼠标移动事件实现的简单示例，演示了如何通过鼠标移动改变元素的位置：

<style>
  .box {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
  }
</style>

<div class="box"></div>

<script>
  function handleMouseMove(event) {
    event = event || window.event;
    const x = event.clientX || event.pageX;
    const y = event.clientY || event.pageY;

    const box = document.querySelector('.box');
    box.style.left = ` ${x}px`; box.style.top = `$ {y}px`;
  }

  const element = document.querySelector('body');
  element.addEventListener('mousemove', handleMouseMove);
</script>

在上述示例中，我们创建了一个具有红色背景的 div 元素，并为其添加了 box 类。然后，我们通过鼠标移动事件来监听页面上鼠标位置的变化，根据鼠标的坐标动态改变 div 元素的位置。

通过以上示例，我们可以看到鼠标移动事件的一种实际应用，即实现简单的拖拽效果。

6. 总结

本文从事件绑定、事件对象、兼容性处理以及实际应用等方面，详细介绍了鼠标移动事件。鼠标移动事件是 Web 开发中常用的一种用户交互方式，掌握了鼠标移动事件的相关知识，将有助于增强用户体验，提升网页交互效果。

希望本文对于读者理解和掌握鼠标移动事件有所帮助。祝大家在 Web 开发的学习和实践中取得进步！### 7. 示例代码

以下是一个鼠标移动事件的示例代码，演示了如何在页面中跟随鼠标移动的效果：

<style>
  .follower {
    width: 50px;
    height: 50px;
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.3s;
  }

  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<div class="follower"></div>

<script>
  function handleMouseMove(event) {
    event = event || window.event;
    const x = event.clientX || event.pageX;
    const y = event.clientY || event.pageY;

    const follower = document.querySelector('.follower');
    follower.style.transform = `translate( ${x - 25}px,$ {y - 25}px)`;
  }

  const element = document.querySelector('body');
  element.addEventListener('mousemove', handleMouseMove);
</script>

在上述示例中，我们创建了一个具有蓝色背景的圆形元素，并为其添加了 follower 类。通过设置元素的 position 属性为 absolute，将其脱离文档流，并通过 pointer-events: none; 禁止元素接受鼠标事件，以便鼠标移动不会受到干扰。

然后，在鼠标移动事件的处理函数中，我们根据鼠标的坐标动态改变元素的位置，通过调整 transform 属性的 translate 值来实现元素跟随鼠标移动的效果。

通过以上示例，我们可以看到鼠标移动事件的另外一种实际应用，即实现一个鼠标跟随效果的小组件。