<style> .clickRightMenu{ width: 110px; background-color: #fff; font-size: 12px; position: absolute; text-align: left; padding: 2px 0; border:1px solid #ccc; display: none; z-index: 100; } .clickRightMenu li{ list-style: none; line-height: 20px; padding-left: 25px; } .clickRightMenu li:hover{ background-color: #dcdcdc; cursor: pointer; } </style> <ul class="clickRightMenu" id="clickRightMenu"> <li>保存</li> <li>取消</li> </ul> <canvas id="canvasId" width="400" height="400" style="border: 1px solid #ccc;"></canvas> <--可自定义为按钮增加点击事件函数--> var clickRightHtml = document.getElementById("clickRightMenu"); var canvas = document.getElementById("canvasId"); clickRightHtml.style.display = "none";//每次右键都要把之前显示的菜单隐藏哦 canvas.oncontextmenu = function(event){ var event = event || window.event; clickRightHtml.style.display = "block"; clickRightHtml.style.left = event.clientX + "px"; clickRightHtml.style.top = event.clientY + "px"; return false;//屏蔽浏览器自带的右键菜单 };