鼠標的默認事件之oncontextmenu及其案例


當我們在瀏覽器中點擊鼠標右鍵時會彈出一個默認的窗口,我們可以通過改變oncontexmenu事件來修改它的默認事件;另外,當我們按空格鍵時,瀏覽器窗口的滾動條會向下滾動一段距離,我們也可以通過綁定相應的事件來改變它。如下:

<!doctype html>
<html>
    <head>
        <!--聲明當前頁面編碼集(中文編碼<gbk,gb2312>,國際編碼<utf-8>)-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="關鍵詞,關鍵詞">
        <meta name="description" content="">
        <title> html </title>
        <style type="text/css">
            *{padding:0px;margin:0px;}
            body{height:2000px;}
        </style>
    </head>
<body>
    <script>
/*屏蔽鼠標右鍵的默認事件*/
        document.oncontextmenu = function(){
            return false;
        };
/*屏蔽按空格鍵是滾動條向下滾動*/    
        document.onkeydown = function(ev){
            var e = ev||event;
            if(e.keyCode == 32){
                return false;
            }
        }
    </script>
</body>

</html>

下面是一個改變鼠標右鍵的默認事件案例:

<!doctype html>
<html>
    <head>
        <!--聲明當前頁面編碼集(中文編碼<gbk,gb2312>,國際編碼<utf-8>)-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="關鍵詞,關鍵詞">
        <meta name="description" content="">
        <title> html </title>
        <style type="text/css">
            *{padding:0px;margin:0px;}
            #box{display:none;width:150px;height:200px;background:gray;position:fixed;}
        </style>
    </head>
<body>
    <div id="box"></div>
        
    <script>
        var obox = document.getElementById("box");
        /*點擊鼠標右鍵時執行*/
        document.oncontextmenu =  function(ev){
            var e = ev||window.event;
            var x = e.clientX;
            var y = e.clientY;
            obox.style.cssText = "display:block;top:"+y+"px;left:"+x+"px;";
            return false;
        };
    /*點擊空白處隱藏*/
        document.onclick = function(){
            obox.style.display = "none";
        };
    </script>
</body>
</html>

 


免責聲明!

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



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