Explication détaillée de la méthode utilisée dans l'événement js oncontextmenu-js tutoriel-php.cn

Explication détaillée de la méthode utilisée dans l'événement js oncontextmenu

亚连

Libérer： 2018-05-19 11:36:02

original

3190 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée de l'utilisation de l'événement js oncontextmenu. Les amis qui en ont besoin peuvent se référer à la définition et à l'utilisation de l'événement

oncontextmenu. lorsque l'utilisateur clique avec le bouton droit sur l'élément Déclenche et ouvre le menu contextuel lorsque la souris est enfoncée.
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.

Exemple

Exécuter JavaScript lorsque l'utilisateur clique avec le bouton droit sur l'élément

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

Copier après la connexion

Utilisez la liste d'événements oncontextmenu pour désactiver le menu contextuel

onconTextmenu=window.event.returnValue=false ; ceci pour interdire la copie.

Ajouter le code d'attribut dans :

<script>
 window.document.oncontextmenu = function(){ 
//alert(&#39;请不要点击鼠标右键！&#39;);
return false;
} 
</script>

Copier après la connexion

oncontextmenu="return false"

onselectstart = "return false" interdit la sélection de contenu sur la page Web

oncopy="return false" empêche la copie du contenu sélectionné par l'utilisateur sur la page Web

empêche les utilisateurs d'enregistrer des pages Web :

Utiliser la balise peut empêcher l'enregistrement direct de la page Web, mais elle ne peut pas empêcher son téléchargement à l'aide des outils <🎜. >

* est un caractère générique.

Exemple 1 :

<html>
<head>
<title>OnContextMenu事件</title>
<script language="JavaScript">
<!--
function uFunction()
{   
　　document.all.infop.innerHTML=&#39;你按下了鼠标右键，但是右键菜单不能 显示！&#39;;
}
function uFunction2()
{  
　　document.all.infop.innerHTML=&#39;你按下了Ctrl+鼠标右键，可以 显示右键菜单。&#39;;
}
//-->
</script>
</head>
<body oncontextmenu="if(!event.ctrlKey){uFunction();return false}else{uFunction2()}">
　　<p id="infop">你按下了鼠标右键，但是右键菜单不能 显示！<br>你按下了Ctrl+鼠标右键，可以显示右键菜单。
　　</p>
</body>
</html>

Copier après la connexion

Exemple 2 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>利用OnMousedown和OnContextmenu为表格添加鼠标左中右键单击的处理</title>
  <script type="text/javascript">
　　　　var keyArray = new Array(
  　　　　new Array(0, "右键"),
  　　　　new Array(1, "左键"),
  　　　　new Array(2, "右键"), // 测试在IE7中按右键是2,在Maxthon2.0正式版中是0
  　　　　new Array(3, "左键右键同时按"),//在IE7中我测试捕获不到，慎用
  　　　　new Array(4, "中键")
  　　　　//测试同时按两个键更多的表示
  　　　　//new Array(6, "中键右键同时按")
　　　　);
　　　　function Click()
　　　　{
  　　　　var message = GetKeyMessage(event.button);
  　　　　alert(message);
  　　　　if (event.button == 2 || event.button == 0) //按右键，// 测试在IE7中按右键是2,在Maxthon2.0正式版中是0
  　　　　 {
    　　　　//处理代码
  　　　　}
　　　　}
　　　　function GetKeyMessage(button)
　　　　{
  　　　　for (var i = 0; i < keyArray.length; i++)
  　　　　{
    　　　　if (keyArray[i][0] == button)
    　　　　{
      　　　　return keyArray[i][1] + "， event.button = " + button;
    　　　　}
  　　　　}
  　　　　 return "未知组合键， event.button = " + button;
　　　　}
　　</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
　　<!--oncontextmenu="return false"屏蔽快捷菜单-->
  <td oncontextmenu="return false" onmousedown="Click()">请分别用左键、右键、中键、左键右键组合点这里测试</td>
</tr>
<tr>
  <td>这个表格没有处理，点这里没反应</td>
</tr>
</table>
</body>
</html>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Chargement de jquery en JS.jsExplication détaillée de la méthode

Spécification de génération JS Explication détaillée des nombres aléatoires de plage et des méthodes de séquence aléatoire

JS pour obtenir le plus petit commun multiple et le plus grand diviseur commun

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Explication détaillée de la méthode utilisée dans l'événement js oncontextmenu