événement oncontextmenu en HTML qui exécute un script lorsque le menu contextuel est déclenché-tutoriel HTML-php.cn

événement oncontextmenu en HTML qui exécute un script lorsque le menu contextuel est déclenché

PHPz

Libérer： 2018-09-30 14:51:51

original

2295 Les gens l'ont consulté

Exemple

Exécuté lorsque l'utilisateur fait un clic droit sur l'élément

JavaScript :

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

Copier après la connexion

Définition et utilisation de

L'événement oncontextmenu se déclenche lorsque l'utilisateur clique avec le bouton droit de la souris sur un élément et ouvre le menu contextuel.

Remarque : tous les navigateurs prennent en charge l'événement oncontextmenu et l'élément contextmenu n'est pris en charge que par le navigateur Firefox.

Prise en charge du navigateur

événement oncontextmenu en HTML qui exécute un script lorsque le menu contextuel est déclenché

Syntaxe

HTML :

<element oncontextmenu="myScript">

Copier après la connexion

JavaScript :

object.oncontextmenu=function(){myScript};

Copier après la connexion

En JavaScript, utilisez la méthode addEventListener() :

object.addEventListener("contextmenu", myScript);

Copier après la connexion

Remarque : Internet Explorer 8 et les versions antérieures du navigateur IE ne prennent pas en charge addEventListener().

Détails techniques

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

Il apparaîtra lorsque nous cliquerons avec le bouton droit de la souris dans le navigateur Pour une fenêtre par défaut, on peut modifier son événement par défaut en changeant l'événement oncontexmenu ; de plus, lorsque l'on appuie sur la barre d'espace, la barre de défilement de la fenêtre du navigateur défilera vers le bas d'une certaine distance, et on pourra également lier le correspondant ; événement. Changez-le. Comme suit :

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

Copier après la connexion

Ce qui suit est un cas d'événement par défaut pour modifier le bouton droit de la souris :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!