zoukankan      html  css  js  c++  java
  • 鼠标的默认事件之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>
  • 相关阅读:
    读书笔记 1 --《码出高效:java开发手册》
    TCP
    同步、异步、阻塞、非阻塞
    MongoDB 概述
    mysql连接不释放
    R-CNN学习笔记
    吴恩达深度学习笔记(十二)—— Batch Normalization
    吴恩达深度学习笔记(十一)—— dropout正则化
    《统计学习方法》笔记第二章 —— 感知机
    《机器学习基石》第一周 —— When Can Machine Learn?
  • 原文地址:https://www.cnblogs.com/wanglitao/p/5685107.html
Copyright © 2011-2022 走看看