Maison >interface Web >tutoriel HTML >événement oncontextmenu en HTML qui exécute un script lorsque le menu contextuel est déclenché

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

PHPzoriginal: 2017-11-04 11:29:302277parcourir

Exemple

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

JavaScript :

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

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

JavaScript :

object.oncontextmenu=function(){myScript};

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

object.addEventListener("contextmenu", myScript);

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>

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：attribut d'événement HTML onchange déclenché lorsque la valeur de l'élément changeArticle suivant：attribut d'événement HTML onchange déclenché lorsque la valeur de l'élément change

Articles Liés

Voir plus