绑定右键事件

右键单击鼠标后会出现一个菜单，实现这个功能

一. contextmenu 事件

单击右键触发 contextmenu 事件

1.定义和用法

绑定该事件 .on( "contextmenu", handler )
移除该事件 .off( "contextmenu" )

2.语法

$(selector).contextmenu( [eventData ], handler )

3.参数描述

eventData 可选。 任意类型 传递给事件处理程序的参数对象。
handler 可选。 Function类型 事件触发时执行的函数。

二. 显示右侧菜单

1.鼠标点击事件(阻止鼠标右键单击的默认行为)

1.1 document对象区域监听

$(document).on("contextmenu",function(){
     return false;
})

1.2 某一区域监听

$(某一元素).on("contextmenu",function(){
     return false;
})

2.触发鼠标点击事件，获取鼠标当前所在浏览器的位置

clientX/Y 提供了相对于viewport的以CSS像素度量的坐标

HTML部分
<div id="rMenu">
    <ul>
        <li>新增</li>
        <li>删除</li>
        <li>编辑</li>
    </ul>
</div>
CSS部分
#rMenu{
    position:absolute;
    visibility:hidden;
    top:0;
    background:#ccc;
    text-align:left;
}
JS部分
$(document).on("contextmenu",onRightClick);
//鼠标点击其他地方右键菜单消失
$("body").on("mousedown",onBoduMosueDown);
function onBoduMosueDown(){
      $("#rMenu").CSS({"visibility":"hidden"})   
}
function onRightClick(event){
    //鼠标位置
    var x = e.clientX ,y = e.clientY , 
    //获取视口宽高
    vx = document.documentElement.clientWidth , 
    vy = document.documentElement.clientHeight,
    //右侧菜单宽高
    mw =  $("#rMenu").offsetWidth, mh =  $("#rMenu").offsetHeight;
    return {
        left : (x + mw) > vx ? (vx - mw ) : x,
        top : (y + mh) > vy ? (vy - mh ) : y
    }
    $("#rMenu").CSS({"left":x + "px","top":y + "px","visibility":"visible"})
    //阻止鼠标右键单击的默认行为
    return false;
}