oncontextmenu-Ereignis in HTML, das ein Skript ausführt, wenn das Kontextmenü ausgelöst wird-HTML-Tutorial-php.cn

oncontextmenu-Ereignis in HTML, das ein Skript ausführt, wenn das Kontextmenü ausgelöst wird

PHPz

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

Original

2250 Leute haben es durchsucht

Beispiel

Wird ausgeführt, wenn der Benutzer mit der rechten Maustaste auf das

-Element klicktJavaScript :

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

Nach dem Login kopieren

Definition und Verwendung von

Das oncontextmenu-Ereignis wird ausgelöst, wenn der Benutzer mit der rechten Maustaste auf ein Element klickt und das Kontextmenü öffnet.

Hinweis: Alle Browser unterstützen das oncontextmenu-Ereignis und das contextmenu-Element wird nur vom Firefox-Browser unterstützt.

Browser unterstützt

oncontextmenu-Ereignis in HTML, das ein Skript ausführt, wenn das Kontextmenü ausgelöst wird

Syntax

HTML:

<element oncontextmenu="myScript">

Nach dem Login kopieren

JavaScript:

object.oncontextmenu=function(){myScript};

Nach dem Login kopieren

Verwenden Sie in JavaScript die Methode addEventListener():

object.addEventListener("contextmenu", myScript);

Nach dem Login kopieren

Hinweis: Internet Explorer 8 und frühere IE-Browserversionen unterstützen addEventListener() nicht.

Technische Details

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

Es erscheint, wenn wir mit der rechten Maustaste darauf klicken der Browser Für ein Standardfenster können wir sein Standardereignis ändern, indem wir das Oncontexmenu-Ereignis ändern. Wenn wir außerdem die Leertaste drücken, scrollt die Bildlaufleiste des Browserfensters um eine bestimmte Distanz nach unten, und wir können auch das entsprechende binden Ereignis. Ändern Sie es. Wie folgt:

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

Nach dem Login kopieren

Das Folgende ist ein Standardereignisfall zum Ändern der rechten Maustaste:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vononcontextmenu-Ereignis in HTML, das ein Skript ausführt, wenn das Kontextmenü ausgelöst wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!