JS 右键事件 oncontextmenu

<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
ul{
    height:auto;
    width:120px;
    border:solid 1px #ddd;
    display:none;
    position:absolute;
}
li{
    list-style:none;
    height:50px;
    text-align:center;
    line-height:50px;
    font-size:14px;
    border-bottom:solid 1px #ddd;
}
</style>
<ul>
    <li>刷新</li>
    <li>前进</li>
    <li>后退</li>
    <li>复制</li>
    <li>粘贴</li>
</ul>

<script type="text/javascript">
var ul = document.getElementsByTagName('ul')[0];

//相对用的比较少event
window.oncontextmenu = function(e) {
    //通过事件对象来获取鼠标的位置
    var x = e.clientX;
    var y = e.clientY;

    //修改div的位置
    ul.style.left = x + 'px';
    ul.style.top = y + 'px';

    //显示菜单
    ul.style.display = 'block';
    return false;
}

//获取li元素v
var lis = document.getElementsByTagName('li');

for(var i=0;i<lis.length;i++){
    //绑定鼠标移入事件
    lis[i].onmouseover = function() {
        //修改当前元素的背景颜色
        this.style.background = '#99CCCC';
        this.style.color = 'white';
        this.style.cursor = 'pointer';
    }

    //绑定鼠标的移出事件
    lis[i].onmouseout = function() {
        this.style.background = 'white';
        this.style.color = 'black';
    }
}

//给窗口绑定一个单击事件
window.onclick = function(){
    //隐藏元素
    ul.style.display = 'none';
}
</script>