自定义右键菜单 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 200px; border: 1px solid red; position: absolute; display: none;}  //菜单一开始不显示
</style>
<script>
window.onload = function() {
    
    var oDiv = document.getElementById('div1');
    
    document.oncontextmenu = function(ev) { //当鼠标点击右键的时候执行
        var ev = ev || event;  //事件的浏览器兼容性
        
        oDiv.style.display = 'block';  //菜单栏显示
        
        oDiv.style.left = ev.clientX + 'px';  //菜单的距离屏幕左侧的位置等于鼠标点击时距离屏幕左侧的位置
        oDiv.style.top = ev.clientY + 'px';  //菜单上部的距离为鼠标点击时距离屏幕上方的位置
        
        return false;  //阻止鼠标右键的默认行为
        
    }
    
    document.onclick = function() {  //点击鼠标左键菜单隐藏
        oDiv.style.display = 'none';
    }
    
}
</script>
</head>

<body>
    <div id="div1"></div>
</body>
</html>

阻止鼠标右键默认出现的菜单，自己定义自己想要的菜单

posted @ 2017-04-12 11:51  念念念不忘  阅读(110)  评论(0)    收藏  举报