.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>
演示结果