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." ); });
现在,在这个元素上单击鼠标右键显示警报:
要手动触发事件,调用不带参数的.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