oncontextmenu 事件

Event 对象参考手册 事件对象

当用户在 <div> 元素 上右击鼠标时执行 JavaScript ：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    div {
      background: yellow;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>

  <div oncontextmenu="myFunction()" contextmenu="mymenu">
    <p>在文本框内右击鼠标查看上下文菜单！</p>
    <menu type="context" id="mymenu">
      <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
      <menu label="Share on...">
        <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
        <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
      </menu>
      <menuitem label="向该网页发送邮件" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
    </menu>
  </div>
  <script>
    function myFunction() {
      alert("你在 div 元素总点击鼠标了右键。");
    }
  </script>
  <p><strong>注意：</strong> 只有 Firefox 中支持 contextmenu <strong>属性</strong> !</p>

</body>
</html>

尝试一下 »

定义和使用

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。

浏览器支持

事件
oncontextmenu Yes Yes Yes Yes Yes

语法

HTML 中:

<element oncontextmenu="myScript">
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    div {
      background: yellow;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>

  <p>该实例演示了如何在 div 元素中指定 "oncontextmenu" 事件。</p>
  <div oncontextmenu="myFunction()" contextmenu="mymenu">
    <p>在框中点击鼠标右键查看上下文菜单！</p>
    <menu type="context" id="mymenu">
      <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
      <menu label="Share on...">
        <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
        <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
      </menu>
      <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
    </menu>
  </div>
  <p id="demo"></p>
  <script>
    function myFunction() {
      var x = document.getElementById("demo");
      x.innerHTML = "你在 div 中点击了鼠标右键!";
      x.style.fontSize = "30px";
    }
  </script>
  <p><strong>注意：</strong> 只有 Firefox 中支持 contextmenu <strong>属性</strong> !</p>

</body>
</html>

尝试一下 »

JavaScript 中:

object.oncontextmenu = function() {
  myScript
};
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    div {
      background: yellow;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>

  <p>该实例使用了 HTML DOM 向 div 元素中指定 "oncontextmenu" 事件。</p>
  <div id="myDIV" contextmenu="mymenu">
    <p>在框中点击鼠标右键查看上下文菜单！
      <menu type="context" id="mymenu">
        <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
        <menu label="Share on...">
          <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
          <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
        </menu>
        <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
      </menu>
  </div>
  <p id="demo"></p>
  <script>
    document.getElementById("myDIV").oncontextmenu = function() {
      myFunction()
    };

    function myFunction() {
      var x = document.getElementById("demo");
      x.innerHTML = "你在 div 中点击了鼠标右键!";
      x.style.fontSize = "30px";
    }
  </script>
  <p><strong>注意：</strong> 只有 Firefox 中支持 contextmenu <strong>属性</strong> !</p>

</body>
</html>

尝试一下 »

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("contextmenu", myScript);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    div {
      background: yellow;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>

  <p>该实例使用了 addEventListener() 方法向 div 元素添加 "contextmenu" 事件。</p>
  <div id="myDIV" contextmenu="mymenu">
    <p>在框中点击鼠标右键查看上下文菜单！
      <menu type="context" id="mymenu">
        <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
        <menu label="Share on...">
          <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
          <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
        </menu>
        <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
      </menu>
  </div>
  <p id="demo"></p>
  <script>
    document.getElementById("myDIV").addEventListener("contextmenu", myFunction);

    function myFunction() {
      var x = document.getElementById("demo");
      x.innerHTML = "你在 div 中点击了鼠标右键!";
      x.style.fontSize = "30px";
    }
  </script>
  <p><strong>注意：</strong> 只有 Firefox 中支持 contextmenu <strong>属性</strong> !</p>

</body>
</html>

尝试一下 »

注意： Internet Explorer 8 及更早 IE 浏览器版本不支持 addEventListener() 。

技术细节

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

Event 对象参考手册 事件对象