html中当上下文菜单被触发时运行脚本的oncontextmenu事件-html教程-PHP中文网

html中当上下文菜单被触发时运行脚本的oncontextmenu事件

PHPz

发布： 2017-11-04 11:29:30

原创

2441人浏览过

实例

当用户在

元素上右击鼠标时执行 javascript ：

<div oncontextmenu="myFunction()" contextmenu="mymenu">

登录后复制

定义和使用

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。

浏览器支持

1W4LT7KJJT_}14H19MB8~FS.png

语法

HTML 中:

立即学习“前端免费学习笔记（深入）”；

<element oncontextmenu="myScript">

登录后复制

JavaScript 中:

object.oncontextmenu=function(){myScript};

登录后复制

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("contextmenu", myScript);

登录后复制

注意： Internet Explorer 8 及更早 IE 浏览器版本不支持 addEventListener() 。

技术细节

是否支持冒泡:	Yes
是否可以取消:	Yes
事件类型:	MouseEvent
支持的 HTML 标签:	所有 HTML 元素

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

登录后复制

以上就是html中当上下文菜单被触发时运行脚本的oncontextmenu事件的详细内容，更多请关注php中文网其它相关文章！