Heim > Artikel > Web-Frontend > oncontextmenu-Ereignis in HTML, das ein Skript ausführt, wenn das Kontextmenü ausgelöst wird

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

PHPzOriginal: 2017-11-04 11:29:302245Durchsuche

Beispiel

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

-Element klicktJavaScript :

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

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

JavaScript:

object.oncontextmenu=function(){myScript};

Verwenden Sie in JavaScript die Methode addEventListener():

object.addEventListener("contextmenu", myScript);

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Das HTML-Ereignisattribut onchange wird ausgelöst, wenn sich der Elementwert ändertNächster Artikel：Das HTML-Ereignisattribut onchange wird ausgelöst, wenn sich der Elementwert ändert

In Verbindung stehende Artikel

Mehr sehen