JS mousedown事件详解|极客笔记

JS mousedown事件详解

1. 概述

mousedown是JavaScript中的一个鼠标事件，用于监听鼠标按下的操作。当鼠标按下时，该事件被触发，并执行相应的处理函数。本文将详细介绍mousedown事件的相关内容，包括事件绑定、事件对象、特殊按键、事件传播等。

2. 事件绑定

在JavaScript中，我们可以通过多种方式为元素绑定mousedown事件。常见的方法有使用addEventListener函数和直接在HTML标签的onmousedown属性中编写JavaScript代码。

2.1 使用addEventListener函数绑定

const element = document.getElementById("myElement");
element.addEventListener("mousedown", myFunction);

function myFunction(event) {
  console.log("鼠标按下了");
}

上述代码首先通过getElementById方法获取目标元素myElement，然后使用addEventListener函数为该元素绑定了mousedown事件，并指定了处理函数myFunction。当鼠标按下时，myFunction函数将被调用，并打印出”鼠标按下了”的信息。

2.2 直接在HTML标签中绑定

<div id="myElement" onmousedown="myFunction(event)"></div>

<script>
function myFunction(event) {
  console.log("鼠标按下了");
}
</script>

上述代码中，我们直接在HTML标签的onmousedown属性中编写了JavaScript代码，当鼠标按下时，myFunction函数将被调用，并打印出”鼠标按下了”的信息。

3. 事件对象

在mousedown事件的处理函数中，我们可以通过事件对象（event）来获取与该事件相关的信息，例如鼠标按键、鼠标坐标等。

3.1 鼠标按键

event.button属性用于获取鼠标按下时按下的是哪个鼠标按键。该属性返回一个数字，不同的按键对应的值不同。常见的值解释如下：

0：表示按下了鼠标的左键。
1：表示按下了鼠标的中键。
2：表示按下了鼠标的右键。

以下是一个示例代码，演示如何获取鼠标按键：

const element = document.getElementById("myElement");
element.addEventListener("mousedown", myFunction);

function myFunction(event) {
  switch(event.button) {
    case 0:
      console.log("按下了鼠标的左键");
      break;
    case 1:
      console.log("按下了鼠标的中键");
      break;
    case 2:
      console.log("按下了鼠标的右键");
      break;
    default:
      console.log("按下了其他鼠标按键");
      break;
  }
}

当鼠标按下不同的鼠标按键时，对应的信息将分别被打印出来。

3.2 鼠标坐标

event.clientX和event.clientY属性用于获取鼠标按下时鼠标相对于浏览器窗口左上角的横坐标和纵坐标。以下是一个示例代码：

const element = document.getElementById("myElement");
element.addEventListener("mousedown", myFunction);

function myFunction(event) {
  const x = event.clientX;
  const y = event.clientY;
  console.log(`鼠标按下的坐标为：( ${x},$ {y})`);
}

当鼠标按下时，该代码将打印出鼠标按下时的坐标。

4. 特殊按键

在鼠标事件中，有一些特殊的按键需要特别处理，例如Ctrl键和Shift键等。

4.1 Ctrl键

event.ctrlKey属性用于判断鼠标按下时是否按下了Ctrl键。当Ctrl键被按下时，该属性的值为true，否则为false。以下是一个示例代码：

const element = document.getElementById("myElement");
element.addEventListener("mousedown", myFunction);

function myFunction(event) {
  if (event.ctrlKey) {
    console.log("按下了Ctrl键");
  } else {
    console.log("未按下Ctrl键");
  }
}

当按下鼠标同时按下Ctrl键时，代码将打印出”按下了Ctrl键”的信息。

4.2 Shift键

event.shiftKey属性用于判断鼠标按下时是否按下了Shift键。当Shift键被按下时，该属性的值为true，否则为false。以下是一个示例代码：

const element = document.getElementById("myElement");
element.addEventListener("mousedown", myFunction);

function myFunction(event) {
  if (event.shiftKey) {
    console.log("按下了Shift键");
  } else {
    console.log("未按下Shift键");
  }
}

当按下鼠标同时按下Shift键时，代码将打印出”按下了Shift键”的信息。

5. 事件传播

在使用mousedown事件时，我们需要了解事件传播的机制。事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

5.1 捕获阶段

在捕获阶段，事件从顶层向下层传播，直到达到事件触发的元素。此阶段中，通过addEventListener函数绑定的事件处理函数默认不会被执行。

const parentElement = document.getElementById("parentElement");
const childElement = document.getElementById("childElement");

parentElement.addEventListener("mousedown", function() {
  console.log("触发了父元素的mousedown事件");
}, true);

childElement.addEventListener("mousedown", function() {
  console.log("触发了子元素的mousedown事件");
}, true);

上述代码中，当鼠标按下时，首先触发父元素的mousedown事件，然后再触发子元素的mousedown事件。

5.2 目标阶段

在目标阶段，事件达到了触发事件的元素。此阶段中，通过addEventListener函数绑定的事件处理函数会被执行。

const element = document.getElementById("myElement");
element.addEventListener("mousedown", function() {
  console.log("触发了元素的mousedown事件");
});

上述代码中，当鼠标按下时，将触发元素的mousedown事件，并执行事件处理函数。

5.3 冒泡阶段

在冒泡阶段，事件从触发事件的元素向上传播到顶层。此阶段中，通过addEventListener函数绑定的事件处理函数会被执行。

const parentElement = document.getElementById("parentElement");
const childElement = document.getElementById("childElement");

parentElement.addEventListener("mousedown", function() {
  console.log("触发了父元素的mousedown事件");
});

childElement.addEventListener("mousedown", function() {
  console.log("触发了子元素的mousedown事件");
});

上述代码中，当鼠标按下时，首先触发子元素的mousedown事件，然后再触发父元素的mousedown事件。

6. 示例代码运行结果

以下是一个完整的示例代码，演示了如何使用mousedown事件：

<!DOCTYPE html>
<html>
<head>
  <title>JS mousedown事件示例</title>
  <style>
    #myElement {
      width: 200px;
      height: 200px;
      background-color: gray;
      color: white;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <div id="myElement">点击我</div>

  <script>
    const element = document.getElementById("myElement");
    element.addEventListener("mousedown", myFunction);

    function myFunction(event) {
      switch(event.button) {
        case 0:
          console.log("按下了鼠标的左键");
          break;
        case 1:
          console.log("按下了鼠标的中键");
          break;
        case 2:
          console.log("按下了鼠标的右键");
          break;
        default:
          console.log("按下了其他鼠标按键");
          break;
      }

      const x = event.clientX;
      const y = event.clientY;
      console.log(`鼠标按下的坐标为：( ${x},$ {y})`);

      if (event.ctrlKey) {
        console.log("按下了Ctrl键");
      } else {
        console.log("未按下Ctrl键");
      }

      if (event.shiftKey) {
        console.log("按下了Shift键");
      } else {
        console.log("未按下Shift键");
      }
    }
  </script>
</body>
</html>

当在浏览器中运行上述代码时，点击”点击我”的区域，并按下鼠标的不同按键、同时按下Ctrl键或Shift键，会在控制台输出相应的信息。

以上就是关于JS的mousedown事件的详细讲解。掌握了mousedown事件的绑定、事件对象的使用、特殊按键的判断以及事件传播的机制，我们可以更好地理解和应用鼠标按下事件。