js實現右鍵菜單功能

時間 2019-11-13

標籤實現右鍵菜單功能欄目 JavaScript 简体版

原文原文鏈接

這篇文章主要爲你們詳細介紹了js實現右鍵菜單功能,具備必定的參考價值，感興趣的小夥伴們能夠參考一下javascript

本文解決的問題：一、實現右鍵菜單功能代碼；二、阻止默認事件的實際應用。css

?html

1java

2瀏覽器

3spa

4.net

5code

6htm

7事件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>右鍵菜單</title>

<style type="text/css">

#menu {

position: fixed;

left:0;

top:0;

width:200px;

height: 400px;

background-color: blue;

display: none;

}

</style>

</head>

<body>

<div id="menu">

</div>

<script type="text/javascript">

var menu = document.getElementById("menu");

document.oncontextmenu = function(e) {

var e = e || window.event;

//鼠標點的座標

var oX = e.clientX;

var oY = e.clientY;

//菜單出現後的位置

menu.style.display = "block";

menu.style.left = oX + "px";

menu.style.top = oY + "px";

//阻止瀏覽器默認事件

return false;//通常點擊右鍵會出現瀏覽器默認的右鍵菜單，寫了這句代碼就能夠阻止該默認事件。

}

document.onclick = function(e) {

var e = e || window.event;

menu.style.display = "none"

}

menu.onclick = function(e) {

var e = e || window.event;

e.cancelBubble = true;

}

// document.addEventListener("contextmenu",function(e){

// var e = e || window.event;

// e.preventDefault();

// alert("menu");

// },false)

</script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。