Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der im js oncontextmenu-Ereignis verwendeten Methode

Detaillierte Erläuterung der im js oncontextmenu-Ereignis verwendeten Methode

亚连
Freigeben: 2018-05-19 11:36:02
Original
3221 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Verwendung von js oncontextmenu-Ereignis vorgestellt. Freunde, die es benötigen, können sich auf die Definition und Verwendung von

oncontextmenu-Ereignis beziehen wenn der Benutzer mit der rechten Maustaste auf das Element klickt, wird das Kontextmenü geöffnet, wenn die Maus gedrückt wird.
Hinweis: Alle Browser unterstützen das oncontextmenu-Ereignis und das contextmenu-Element wird nur vom Firefox-Browser unterstützt.

Beispiel

JavaScript ausführen, wenn der Benutzer mit der rechten Maustaste auf das

-Element klickt:

<p oncontextmenu="myFunction()" contextmenu="mymenu">
Nach dem Login kopieren

Verwenden Sie das Ereignis oncontextmenu, um das Rechtsklick-Menü zu deaktivieren

onconTextmenu=window.event.returnValue=false; deaktivieren Sie das Rechtsklick-Menü das Kopieren verbieten.

Attributcode zu hinzufügen:

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

oncontextmenu="return false"

onselectstart=" return false“ verhindert die Auswahl von Inhalten auf der Webseite

oncopy="return false" verhindert das Kopieren von Inhalten, die vom Benutzer auf der Webseite ausgewählt wurden

verhindert, dass Benutzer Webseiten speichern:

Die Verwendung des Tags „noscript>“ kann verhindern, dass die Webseite mithilfe von Tools heruntergeladen wird 🎜>* ist ein Platzhalterzeichen.

Beispiel 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>
Nach dem Login kopieren

Beispiel 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>
Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Jquery in JS laden.

jsDetaillierte Erläuterung der Methode

JS-Generierungsspezifikation Detaillierte Erläuterung der Bereichszufallszahlen und Zufallssequenzmethoden


JS zum Erhalten des kleinsten gemeinsamen Vielfachen und des größten gemeinsamen Teilers


Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der im js oncontextmenu-Ereignis verwendeten Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage