• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • contextmenu()

    为 JavaScript 的"contextmenu"事件绑定一个处理器,或者触发元素上的"contextmenu"事件。

    这个函数的前两个用法是.on("contextmenu", handler)的快捷方式,第三个用法是.trigger("contextmenu")的快捷方式。当在一个元素上点击鼠标的右键时,contextmenu事件被发送到这个元素上,但在显示的上下文菜单(右键菜单)之前。这时上下文菜单键被按下,该事件在html元素上被触发。任何HTML元素都可以接受此事件。例如,请看下面的HTML:

    <div id="target">
      Right-click here
    </div>
    

    事件处理程序可以绑定到<div>元素上,如下:

    $( "#target" ).contextmenu(function() {
      alert( "Handler for .contextmenu() called." );
    });
    

    现在,在这个元素上单击鼠标右键显示警报:

    Handler for .contextmenu()called.

    要手动触发事件,调用不带参数的.contextmenu():

    $( "#target" ).contextmenu();
    

    其他注意事项:

    • .contextmenu()方法只是作为.on("contextmenu", handler)的一个速记写法,移除该事件可以使用.off("contextmenu").

    例子

    当contextmenu事件在段落元素上被触发时候,显示“Hello World!”对话框:

    $( "p" ).contextmenu(function() {
      alert( "Hello World!" );
    });
    

    右键单击切换背景颜色。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>contextmenu demo</title>
      <style>
      div {
        background: blue;
        color: white;
        height: 100px;
        width: 150px;
     }
      div.contextmenu {
        background: yellow;
        color: black;
      }
      </style>
      <script src="https://code.jquery.com/jquery-last.js"></script>
    </head>
    <body>
     
    <div></div>
    <span>Right click the block</span>
     
    <script>
    var div = $( "div:first" );
    div.contextmenu(function() {
      div.toggleClass( "contextmenu" );
    });
    </script>
     
    </body>
    </html>
    
    Right click the block

    上篇:dblclick()

    下篇:mouseup()