Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the method used in js oncontextmenu event

亚连
Release: 2018-05-19 11:36:02
Original
3100 people have browsed it

This article mainly introduces the detailed use of js oncontextmenu event. Friends who need it can refer to

Definition and use

oncontextmenu event when the user right-clicks on the element Triggers and opens context menu when mouse is pressed.
Note: All browsers support the oncontextmenu event, and the contextmenu element is only supported by the Firefox browser.

Example

Execute JavaScript when the user right-clicks the mouse on the

element:

<p oncontextmenu="myFunction()" contextmenu="mymenu">
Copy after login

Use the oncontextmenu event to disable the right-click menu

onconTextmenu=window.event.returnValue=false; Disable the right-click menu. Use this to prohibit copying.

Add attribute code to :

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

oncontextmenu="return false"

onselectstart=" return false" prohibits selection of content on the webpage

oncopy="return false" prevents copying of content selected by the user on the webpage

prevents users from saving webpages:

Use< The noscript> tag can prevent the webpage from being saved directly, but it cannot prevent the webpage from being downloaded using tools.

* is a wildcard character.

Example 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>
Copy after login

Example 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>
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Loading jquery in JS.jsDetailed explanation of the method

JS generation specification Detailed explanation of range random number and random sequence methods

##JS to obtain the least common multiple and greatest common divisor

The above is the detailed content of Detailed explanation of the method used in js oncontextmenu event. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!