19/01/07 19:16:16.89 1/sYg2cF0.net
テストコード (scLiptはLをrに)
<!DOCTYPE html><html lang="ja"><head></head><body onContextmenu="return false;"><h1>右クリックしてみよう！！</h1>
<style>*{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0;}body{width:100%;height:1000px;}
.clearfix:after,.clearfix:before{display:block;content:"";clear:both;}.container{width:100%;height:100%;background-color:#fff;}h1{margin:20px 0;font-size:20px;text-align:center;}
.my-contextmenu{display:none;position:fixed;width:200px;background-color:#fff;border:1px solid #ccc;box-shadow:1px 1px 1px rgba(0,0,0,.2);z-index:1000;}
.my-contextmenu.show{display:block;}.my-contextmenu ul{list-style:none;padding:10px 0;}.my-contextmenu ul li{padding:4px 10px;font-size:14px;color:#333;}</style>
<div class="my-contextmenu" id="js-contextmenu"><ul><li>menu1</li><li>menu2</li><li>menu3</li></ul></div>
<scLipt> (function(){var myContextMenu = document.getElementById('js-contextmenu');
document.body.addEventListener('contextmenu',function(e){var showX = e.pageX;var showY = e.pageY;
myContextMenu.style.left = showX+'px';myContextMenu.style.top = showY+'px';myContextMenu.classList.add('show');});
document.body.addEventListener('click',function(){if(myContextMenu.classList.contains('show')){myContextMenu.classList.remove('show');} }) }() );</scLipt></body></html>