鼠标的默认事件之oncontextmenu及其案例

来源：互联网发布：多玩数据库5.4 编辑：程序博客网时间：2024/05/21 01:44

当我们在浏览器中点击鼠标右键时会弹出一个默认的窗口，我们可以通过改变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>

阅读全文

0 0