js函数中onmousedown和onclick的区别和联系探讨

2023年5月28日下午2:17 • JavaScript

我们就按照以下步骤来讲解 js 函数中 onmousedown 和 onclick 的区别和联系。

1. onmousedown 和 onclick 的作用

在开始讲解 onmousedown 和 onclick 的区别之前，我们先来了解一下它们的作用。

onmousedown：当鼠标按下某个元素时触发。
onclick：当鼠标点击某个元素时触发。

这两个事件都可以添加在 HTML 标签上或者通过 JavaScript 绑定到 DOM 元素上。

2. 区别

在我们对比 onmousedown 和 onclick 的区别时，有一些比较明显的特征区别：

触发条件不同：onmousedown 触发条件是鼠标按下，而 onclick 触发条件是鼠标点击。
触发时间不同：onmousedown 在鼠标点击的瞬间就会触发，而 onclick 是在鼠标点击并松开后才会触发。
函数参数不同：onmousedown 事件的参数是鼠标按下的时候触发的事件；而 onclick 事件的参数是鼠标点击时候的事件。

3. 联系

除了上述区别之外，我们还可以探讨一下 onmousedown 和 onclick 的关系：

onmousedown 是 onclick 的前置触发事件。这是因为 onmousedown 是在点击之前触发的，因此可以对点击事件进行一些前置处理，比如记录鼠标按下的位置等。
在某些情况下，我们需要监听鼠标的点击事件，并考虑到一些用户的行为习惯，比如双击即执行某个操作。这时候可以使用 onmousedown 和 onclick 配合使用。

接下来，我们通过两个示例来说明 onmousedown 和 onclick 的差异：

示例一

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>onmousedown and onclick demo1</title>
</head>

<body onmousedown="handleMousedown()" onclick="handleClick()">
  <p>请在窗口内随意按下鼠标并放开，然后单击下方按钮查看事件触发顺序</p>
  <button onclick="showClickOrder()">查看事件触发顺序</button>
  <script>
    var order = [];

    function handleClick() {
      order.push("click!");
    }

    function handleMousedown() {
      order.push("mousedown!");
    }

    function showClickOrder() {
      alert("事件触发的顺序是：" + order.join(", "));
    }
  </script>
</body>

</html>

在上面的示例中，我们通过在 body 上绑定 onmousedown 和 onclick 事件，并定义了两个处理函数 handleMousedown 和 handleClick。当首先按下鼠标时，会先触发 onmousedown 事件，然后会在松开鼠标的时候触发 onclick 事件，最后单击按钮时会弹出储存在 order 数组中的事件触发顺序。

示例二

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>onmousedown and onclick demo2</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 0.3s;
    }

    .box-active {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box" onmousedown="handleMousedown()" onclick="handleClick()"></div>
  <script>
    function handleClick() {
      document.querySelector(".box").classList.toggle("box-active");
    }

    function handleMousedown() {
      document.querySelector(".box").style.transform = "scale(0.8)";
    }
  </script>
</body>

</html>

在上例中，我们使用 onmousedown 和 onclick 事件分别对 DIV 元素进行监听。当鼠标按下时，会触发 onmousedown 事件，在此事件中，我们对 DIV 元素进行缩小动画。当鼠标松开并单击时，会触发 onclick 事件，在此事件中，我们对 DIV 元素进行背景色切换动画。