javascript局部自定义鼠标右键菜单

一、局部自定义鼠标右键菜单简介

在开发过程中，我们经常需要为某些元素自定义右键菜单，由于浏览器默认右键菜单固定，因此我们需要通过javascript代码来实现局部自定义鼠标右键菜单。下面就是一个基本的自定义鼠标右键菜单的代码示例：

document.oncontextmenu = function(e){
    var e = e || window.event;
    var oUl = document.querySelector("#menu");
    oUl.style.display = "block";
    oUl.style.left = e.clientX + "px";
    oUl.style.top = e.clientY + "px";
    return false;
};
document.onclick = function(){
    var oUl = document.querySelector("#menu");
    oUl.style.display = "none";
};

在上述代码中，document.oncontextmenu事件用来禁用默认的右键菜单，然后我们通过纯javascript代码创建一个菜单并控制其位置，最后当单击页面时隐藏菜单。

二、示例: 在图片上自定义右键菜单

下面是一个实际的示例，用户在图片上右击时会弹出自定义右键菜单，点击“复制”则会复制该图片的链接到剪贴板中。代码如下：

// 创建自定义菜单
var oMenu = document.createElement("ul");
oMenu.id = "menu";
document.body.appendChild(oMenu);
var oLi = document.createElement("li");
oLi.innerHTML = "复制";
oMenu.appendChild(oLi);

// 图片上右键菜单
var oImg = document.querySelector("img");
oImg.oncontextmenu = function (e) {
    var e = e || window.event;
    oMenu.style.display = "block";
    oMenu.style.left = e.clientX + "px";
    oMenu.style.top = e.clientY + "px";
    return false;
};

// 复制图片链接
oLi.onclick = function () {
    var sUrl = oImg.src;
    var oInput = document.createElement("input");
    oInput.value = sUrl;
    document.body.appendChild(oInput);
    oInput.select();
    document.execCommand("copy");
    document.body.removeChild(oInput);
    oMenu.style.display = "none";
};

我们首先创建ul元素作为右键菜单，然后创建一个li元素用来表示“复制”功能。通过oImg.oncontextmenu事件监听用户在图片上右键事件，并在右键事件触发时显示自定义菜单变量oMenu，这里的菜单默认是隐藏的。用户选择菜单项“复制”时，我们复制该图片的链接到剪贴板，并隐藏自定义菜单。

三、示例: 在输入框上自定义右键菜单

下面是另外一个示例，用户在输入框上右击时会弹出自定义右键菜单，点击“粘贴”则会将剪贴板中的内容粘贴到输入框中。代码如下：

// 创建自定义菜单
var oMenu = document.createElement("ul");
oMenu.id = "menu";
document.body.appendChild(oMenu);
var oLi = document.createElement("li");
oLi.innerHTML = "粘贴";
oMenu.appendChild(oLi);

// 输入框上右键菜单
var oInput = document.querySelector("input");
oInput.oncontextmenu = function (e) {
    var e = e || window.event;
    oMenu.style.display = "block";
    oMenu.style.left = e.clientX + "px";
    oMenu.style.top = e.clientY + "px";
    return false;
};

// 粘贴剪贴板内容到输入框
oLi.onclick = function () {
    var sText = "";
    if (window.clipboardData) {
        sText = window.clipboardData.getData("Text");
    } else {
        sText = document.execCommand("paste");
    }
    oInput.value = sText;
    oMenu.style.display = "none";
};

在这个示例中，我们依旧先创建自定义菜单ul元素和li元素表示“粘贴”功能。我们通过oImg.oncontextmenu事件实现了右键菜单的显示，并且在粘贴菜单项中使用window.clipboardData或者document.execCommand("paste")，让用户可以把剪贴板中的内容粘贴到输入框中。

上述两个示例说明了如何实现局部自定义鼠标右键菜单，可以在不同的场景中灵活应用。同时，创建多个li元素，可以实现更多的自定义功能。