JavaScript模拟鼠标右键菜单效果

本文实例为大家分享了JavaScript模拟鼠标右键菜单的具体代码,供大家参考,具体代码如下

效果图:

具体代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>右键菜单</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

#menu{

width: 254px;

/*background-color: #ccc;*/

font-size: 12px;

position: fixed;

top: 0px;

left: 0px;

/*height: 240px;*/

/*padding-left: 26px;*/

padding-top: 2px;

border:1px solid #ccc;

display: none;

}

#menu li{

list-style: none;

line-height: 25px;

margin-left: -1px;

padding-left: 26px;

}

#menu li:hover{

background-color: #4281f4;

color: #fff;

}

</style>

</head>

<body>

<ul id="menu">

<li>返回(B)</li>

<li>前进(F)</li>

<li>从新加载(R)</li>

<li>另存为(A)</li>

<li>打印(P)</li>

<li>查看网页源代码(V)</li>

<li>查看网页信息(I)</li>

<li>审查元素(N)</li>

</ul>

<script type="text/javascript">

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

document.oncontextmenu =function(e){

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

console.log(e.clientX,e.clientY);

console.log(e);

//单击显示div

menu.style.display = "block";

//设置定义

//判断鼠标坐标是否大于视口宽度-块本身宽度

var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth)?(document.documentElement.clientWidth - menu.offsetWidth):e.clientX;

var cakTop = (e.clientY > document.documentElement.clientHeight - menu.offsetHeight)?(document.documentElement.clientHeight - menu.offsetHeight):e.clientY;

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

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

return false;

}

menu.onclick = function(e) {

var e = e || window.event;

e.cancelBubble = true;

//阻止冒泡。

}

document.onclick = function() {

menu.style.display = "none";

}

</script>

</body>

</html>

希望本文所述对大家学习javascript程序设计有所帮助。

以上是 JavaScript模拟鼠标右键菜单效果 的全部内容, 来源链接: utcz.com/z/337524.html

回到顶部