通常在页面中单机鼠标右键，会弹出系统上下文菜单，有没有想过定制一下该功能实现自己想要的效果呢？ 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery绑定鼠标右键单击事件</title>
        <link rel="stylesheet" type="text/css" href="../css/demos.css"/>
        <style type="text/css">
        </style>
    </head>
    <body>
        <h2 id="h2-caption">jQuery绑定鼠标右键单击事件</h2>
        <hr><br>
        <p>单击鼠标右键进行测试</p>
        <br><hr>
        <div id="div-log">
            <p>日志记录：</p>
        </div>
        <script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/jquery.chromatable.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 鼠标右键单击事件
            ;(function( $ ){
                $.fn.extend({
                    // 定义鼠标右键方法,接收一个函数参数
                    "rightClick" : function(fn){
                        // 调用这个方法后将禁止系统的右键惨淡
                        $(document).on('contextmenu',function(e){
                            return false;
                        });
                        
                        // 为这个对象绑定鼠标按下事件
                        $(this).mousedown(function(e){
                            // 如果按下的是右键，则执行函数
                            if(e.which == 3){
                                fn();
                            }
                        })
                    }
                });
            })(jQuery);
            
            $(function(){
                $('body').rightClick(function(){
                    $("#div-log").html($("#div-log").html()+"<p>"+"鼠标右键单击"+"</p>");
                });
            });
        </script>
    </body>
</html>