妙味——自定义右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
#ul1{
    width: 100px;
    height: auto;
    background: #eee;
    border: 1px solid black;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
li{
    list-style: none;
}
</style>
<script>
document.oncontextmenu=function(ev){
    var oUl = document.getElementById('ul1');
    var oEvent = ev||event;
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

    oUl.style.display='block';
    oUl.style.left=oEvent.clientX+scrollLeft+'px';
    oUl.style.top=oEvent.clientY+scrollTop+'px';

    return false;
}

document.onclick=function(){
    var oUl = document.getElementById('ul1');
    
    oUl.style.display='none';
}
</script>
</head>
<body>
    <ul id="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>
结果如下图所示：
高否？富否？帅否？否？滚去学习！