jQuery - 綁定鼠標右鍵單擊事件


通常在頁面中單機鼠標右鍵,會彈出系統上下文菜單,有沒有想過定制一下該功能實現自己想要的效果呢? 

 

<!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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM