JS oncontextmenu事件使用說明

閱讀量： 245 發(fā)布日期： 2022-10-28 12:29:49

如果您正在尋找一種方法來為您的網(wǎng)站添加一些交互性，JavaScript是最適合使用的語言。使用JavaScript，您可以創(chuàng)建當用戶右鍵單擊頁面上的元素時彈出的菜單。本教程將向您展示如何使用JavaScript創(chuàng)建上下文菜單。

1、JavaScript oncontextmenu事件

oncontextmenu事件會在用戶點擊鼠標右鍵時觸發(fā)。

2、oncontextmenu事件的使用說明

oncontextmenu事件會在用戶點擊對象右鍵時發(fā)生。在用戶點擊對象右鍵時，oncontextmenu事件就會被觸發(fā)。通過這個事件，我們可以實現(xiàn)一些功能，比如彈出菜單、顯示信息等。

3、實例演示

我們通過下面的實例來演示oncontextmenu事件的使用：首先在HTML頁面中定義了一個菜單，然后使用oncontextmenu事件來實現(xiàn)當右鍵點擊時彈出菜單。實例

示例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，轉(zhuǎn)載時必須經(jīng)得同意并以鏈接形式注明作者和原始出處及本聲明。

?JavaScript

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

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

国产色欲AV一区二区三区,国精产品一品二品国精破解,亚洲国产福利成人一区,国语自产少妇精品视频

JS oncontextmenu事件使用說明

熱點推薦

相關模板推薦

無人機充電樁IT科技網(wǎng)站模板

HY011免費模板

HY010免費模板(帶商城功能)

HY009免費模板

HY008免費模板

HY007免費模板

聯(lián)系方式