oncontextmenu event in html that runs a script when the context menu is triggered-HTML Tutorial-php.cn

oncontextmenu event in html that runs a script when the context menu is triggered

PHPz

Release： 2018-09-30 14:51:51

Original

2254 people have browsed it

Example

Execute JavaScript when the user right-clicks the mouse on the

element:

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

Copy after login

Define and use the

oncontextmenu event Fires and opens the context menu when the user right-clicks the mouse on an element.

Note: All browsers support the oncontextmenu event, and the contextmenu element is only supported by the Firefox browser.

Browser support

oncontextmenu event in html that runs a script when the context menu is triggered

Syntax

HTML:

<element oncontextmenu="myScript">

Copy after login

JavaScript:

object.oncontextmenu=function(){myScript};

Copy after login

##In JavaScript, use the addEventListener() method:

object.addEventListener("contextmenu", myScript);

Copy after login

Note: Internet Explorer 8 and earlier IE browser versions do not support addEventListener().

Technical details

##Whether bubbling is supported:Can be canceled:Event type:Supported HTML tags:When we click the mouse in the browser A default window will pop up when you right-click. We can modify its default event by changing the oncontexmenu event. In addition, when we press the space bar, the scroll bar of the browser window will scroll down a certain distance. We can also bind corresponding events to change it. As follows:

Yes
Yes
MouseEvent
All HTML elements

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

Copy after login

The following is a default event case for changing the right mouse button:

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

Copy after login

The above is the detailed content of oncontextmenu event in html that runs a script when the context menu is triggered. For more information, please follow other related articles on the PHP Chinese website!