javascript簡單的右鍵菜單定製

時間 2020-08-28

標籤 javascript 簡單右鍵菜單定製欄目 JavaScript 简体版

原文原文鏈接

今天聽了老師的課程,定製了一個右鍵菜單,寫了個小例子供新手學習.php

右鍵菜單html

<!DOCTYPE html>ide

<html lang="en">學習

<head>this

<meta charset="UTF-8">spa

<title>Document</title>htm

<style>seo

#context{ip

width:200px;get

height:auto;

background:#ccc;

display:none;

position:absolute;

}

ul{

padding:0px;

margin:0px;

}

#context ul li{

width:100%;

height:35px;

border-bottom:1px solid #fff;

text-align:center;

line-height:35px;

list-style:none;

padding:0px;

}

a{

text-decoration:none;

color:#f00;

}

</style>

</head>

<body>

<div id='context'>

<ul>

<li><a href="">刷新</a></li>

<li><a href="b.php">聯繫咱們</a></li>

</ul>

</div>

</body>

<script>

var obj = document.getElementById('context');

document.oncontextmenu=function(event)

{

event.preventDefault();

var x = event.clientX;

var y = event.clientY;

obj.style.display = 'block';

obj.style.left = x+20+'px';

obj.style.top = y+20+'px';

}

var liobj=document.getElementsByTagName('li');

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

{

liobj[i].onmouseover=function(){

var aobj=this.getElementsByTagName('a');

this.style.background='#f00';

aobj[0].style.color="#000";

}

liobj[i].onmouseout=function(){

var aobj=this.getElementsByTagName('a');

this.style.background='#ccc';

aobj[0].style.color="#f00";

}

}

document.onclick=function(event)

{

if(event.button!=2)

{

obj.style.display = 'none';

}

}

</script>

</html>

相關文章

相關標籤/搜索

頁面右鍵菜單

Hibernate教程

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<