日常开发中，我们一般只需要考虑鼠标左键单击事件。但实际上，鼠标不只有左键单击一种事件，在复杂需求下，我们可能需要检测各种不同的鼠标点击事件，比如：鼠标右键单击或者中键（滚轮）单击等事件。本文将分享 javascript 中检测各种鼠标按键的点击事件，包括左键、右键、中键等。

Javascrip 中的MouseEvent对象

JavaScript 中的MouseEvent对象包含一些特定属性，可提供有关发生的鼠标事件的信息。对于检测不同的鼠标按钮，MouseEvent对象的button属性特别有用。它返回一个数字，表示哪个按钮被按下：

  • 0：左键
  • 1：中间按钮（滚轮按钮）
  • 2：右键
  • 3：浏览器后退按钮（并非始终支持）
  • 4：浏览器前进按钮（并非始终支持）

创建事件监听器

要检测各种鼠标点击，首先需要为鼠标点击事件设置一个事件监听器。这可以在文档对象上设置，也可以在要检测鼠标点击的特定元素上设置。

document.addEventListener('mousedown', function(event) {
    console.log(`鼠标按钮被按下: ${event.button}`);
});

检测特定的鼠标点击按钮

在事件监听器回调函数中，可以使用event.button属性来确定按下的鼠标按钮，并根据按钮执行不同的操作。

document.addEventListener('mousedown', function(event) {
    switch (event.button) {
        case 0:
            console.log('点击了鼠标左键');
            break;
        case 1:
            console.log('点击了鼠标中键');
            break;
        case 2:
            console.log('点击了鼠标右键');
            break;
        case 3:
            console.log('点击了浏览器后退按钮');
            break;
        case 4:
            console.log('点击了浏览器前进按钮');
            break;
        default:
            console.log('点击了未知按钮');
    }
});

阻止右键单击的默认操作

浏览器通常会为某些鼠标点击指定默认操作，例如右键点击时显示上下文菜单。如果您的应用程序需要覆盖鼠标右键的默认行为，可以使用event.preventDefault()方法。

document.addEventListener('mousedown', function(event) {
    if (event.button === 2) { // 右键
        event.preventDefault();
        console.log('检测到右键单击；默认上下文菜单已阻止。');
        // 自定义逻辑
    }
});