JS oncontextmenu事件使用说明

阅读量： 235 发布日期： 2022-10-28 12:29:49

如果您正在寻找一种方法来为您的网站添加一些交互性，JavaScript是最适合使用的语言。使用JavaScript，您可以创建当用户右键单击页面上的元素时弹出的菜单。本教程将向您展示如何使用JavaScript创建上下文菜单。

1、JavaScript oncontextmenu事件

oncontextmenu事件会在用户点击鼠标右键时触发。

2、oncontextmenu事件的使用说明

oncontextmenu事件会在用户点击对象右键时发生。在用户点击对象右键时，oncontextmenu事件就会被触发。通过这个事件，我们可以实现一些功能，比如弹出菜单、显示信息等。

3、实例演示

我们通过下面的实例来演示oncontextmenu事件的使用：首先在HTML页面中定义了一个菜单，然后使用oncontextmenu事件来实现当右键点击时弹出菜单。实例

示例1：

<!DOCTYPE html>

<html>

<title>JS oncontextmenu事件</title>

<!--

function uFunction()

{

　　document.all.infop.innerHTML='鼠标右键，不显示！';

}

function uFunction2()

{

　　document.all.infop.innerHTML='Ctrl+鼠标右键，可以显示。';

}

//-->

</script>

</head>

　　<p id="infop">你鼠标右键，右键菜单不显示！<br>Ctrl+鼠标右键，可以显示右键菜单。

　　</p>

</body>

</html>

示例2：

<!DOCTYPE html>

<html>

<head>

<title>OnMousedown、OnContextmenu为表格添加鼠标左中右键单击</title>

　　　　var keyArray = new Array(

　　　　new Array(0, "右键"),

　　　　new Array(1, "左键"),

　　　　new Array(2, "右键"), //

　　　　new Array(3, "左键右键同时按"),//

　　　　new Array(4, "中键")

　　　　//测试同时按两个键更多的表示

　　　　//new Array(6, "中键右键同时按")

　　　　);

　　　　function Click()

　　　　{

　　　　var message = GetKeyMessage(event.button);

　　　　alert(message);

　　　　if (event.button == 2 || event.button == 0) //按右键

　　　　 {

　　　　//处理代码

　　　　}

　　　　function GetKeyMessage(button)

　　　　{

　　　　for (var i = 0; i < keyArray.length; i++)

　　　　{

　　　　if (keyArray[i][0] == button)

　　　　{

　　　　return keyArray[i][1] + "， event.button = " + button;

　　　　}

　　　　 return "组合键， event.button = " + button;

　　　　}

　　</script>

</head>

<body>

<tr>

<td oncontextmenu="return false" onmousedown="Click()">请分别用左键、右键、中键、左键右键组合点测试</td>

</tr>

<tr>

<td>表格没处理，点击没反应</td>

</tr>

</table>

</body>

</html>

谢谢你的阅读！如果你有任何问题，请在下面留言。

作者: bosscms，转载时必须经得同意并以链接形式注明作者和原始出处及本声明。

JavaScript

上一篇：: htaccess是什么文件,htaccess文件在服务器的用途

下一篇：: sandisk secureaccess是什么软件，安装使用方法

JS oncontextmenu事件使用说明

热点推荐

相关模板推荐

无人机充电桩IT科技网站模板

HY011免费模板

HY010免费模板(带商城功能)

HY009免费模板

HY008免费模板

HY007免费模板

联系方式