.contextmenu()
返回: jQuery
.contextmenu( handler )
描述:把某个事件处理函数绑定到JavaScript事件“contextmenu”(上下文菜单)上,或者在某个元素上触发该事件。
加入于: 1.0
.contextmenu( handler )加入于: 1.4.3
.contextmenu( [eventData ], handler )- eventData类型:Anything一个对象,它包含了要传递给事件处理函数的数据。
- handler一个函数,在每次事件被触发时执行它。
加入于: 1.0
.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-1.10.2.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>
演示结果