jQuery,JS实现自定义鼠标右键菜单

鼠标点击事件基本上是每个页面必不可少的，绝大多数情况下都是普通的鼠标左键点击，即可以通过click()方法来实现。

但是我们在很多情况下我们想通过鼠标右键来实现一些功能的实现，比如说一个表格数据，表格的每行数据都可以进行删除、修改、发送等等操作，如果采用在每行都添加这些操作按钮的话，这样做起来很麻烦，并且占据了很多空间。如果我们队每行数据可以采用鼠标右击的方式，然后弹出操作选择模块。这样整个页面显得简洁，并且操作起来也方便了很多。接下来我们就来是实现这个功能。

我们都知道，几乎所有的浏览器，都有自己默认的鼠标右键事件，经常刷新网页就是通过鼠标右键，然后弹出一个选择框，选择我们要进行的操作。

首先第一步，我们要去除掉原有的默认事件。

通过JS屏蔽自带右键菜单

document.oncontextmenu = function(e){
         return false;
}

 鼠标按下时mousedown事件，我们可以通过判断e.which的值来确定是鼠标的那个键按下。

$('#aa').mousedown(function(e){
    if(e.which == 3){  // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
        alert("按下的是鼠标右键");
    }
})

 这样我们就修改了浏览器默认的鼠标右键菜单，接下来我们要在鼠标的位置显示我们自己的菜单。

首先我们先在html中定义一个菜单模块，其position一定要设为绝对定位，并且最好将其放在body的下一级，具体样式的设置这里就不再详细描述了。

<div id="menu">
    <p id="del">删除</p>
    <p id="update">修改</p>
    <p id="send">发送数据</p>
</div>

 下一步当然就是当鼠标右键点下时，获取鼠标的位置，然后将菜单显示在鼠标的位置即可，如果点击鼠标左键则隐藏右键菜单。

$('table').mousedown(function(e){
    if(e.which == 3){  // 1 = 鼠标左键; 2 = 鼠标中键; 3 = 鼠标右键
        var x = e.originalEvent.x || e.originalEvent.layerX || 0;
        var y = e.originalEvent.y || e.originalEvent.layerY || 0;
        $("#menu").css({
            left: x + "px";
            top: y + "px";
        });
        $("#menu").show();
    }
    if(e.which == 1){  //如果鼠标左键点下，则隐藏右键菜单
        $("#menu").hide();
    }
})

这样我们就实现了鼠标右键菜单的改写。

如果有兴趣了解借助Layui来动态获取表格每行的数据及其对应字段，然后对每行数据进行操作的小伙伴们，后续我们更新相应的博客。

下篇博客预告：借助Layui来动态获取表格每行的数据及其对应字段，通过自定义的鼠标右键菜单对其进行操作

希望大家关注我，我会持续分享关于前端的一些经常遇到的问题。大家对我博客的浏览、关注就是对我最大的支持，给予我的动力。’