JS 绑定左键和右键点击事件

概述

介绍 JavaScript 中如何为元素绑定左键单击和右键单击事件，以及如何禁用浏览器默认右键菜单。这是前端交互开发的基础技能。

绑定指定元素的点击事件

var ul = document.querySelector(".FTM-nav-wrap-placeholder .FTM-nav-wrap-list");

// 左键点击
ul.onclick = function(e) {
    console.log("左键点击", e.target);
};

// 右键点击（阻止默认菜单）
ul.oncontextmenu = function(e) {
    e.preventDefault();
    console.log("右键点击");
};

全局事件绑定

// 全局左键点击
document.onclick = function(e) {
    // 处理全局左键逻辑
};

// 禁用整个页面右键菜单
document.oncontextmenu = function(e) {
    return false;
};

使用 addEventListener（推荐）

element.addEventListener("mousedown", function(e) {
    if (e.button === 0) {
        console.log("左键按下");
    } else if (e.button === 2) {
        console.log("右键按下");
    } else if (e.button === 1) {
        console.log("中键按下");
    }
});

// 也支持独立事件
element.addEventListener("click", handleLeftClick);
element.addEventListener("contextmenu", handleRightClick);

e.button 值对照

注意事项

• oncontextmenu 专门处理右键，比 mousedown 更语义化
• e.preventDefault() 和 return false 均可阻止默认右键菜单
• 推荐使用 addEventListener 而非 onclick，支持绑定多个处理函数

标签：