通常在页面中单机鼠标右键,会弹出系统上下文菜单,有没有想过定制一下该功能实现自己想要的效果呢?
<!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>