JavaScriptでオリジナルの右クリックメニューを表示する方法

この記事をシェアする

スポンサードリンク

こんにちは。

今回は、デフォルトの右クリックを無効化して、オリジナルの右クリックを実装する方法です。

DEMO

上のDEMOのような感じで、オリジナルの右クリックを実装します。

WEBサイトよりも、WEBアプリを制作する時に利用されますね。
例えば、DropboxやGmailで右クリックすると独自のメニューが表示されます。

実装方法

HTML

<body onContextmenu="return false;">
<div class="my-contextmenu" id="js-contextmenu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
<script src="./script.js"></script>
</body>

 

CSS

.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;
}

 

JavaScript

(function(){
var myContextMenu = document.getElementById('js-contextmenu');
document.body.addEventListener('contextmenu',function(e){
var posX = e.pageX;
var posY = e.pageY;
myContextMenu.style.left = posX+'px';
myContextMenu.style.top = posY+'px';
myContextMenu.classList.add('show');
});
document.body.addEventListener('click',function(){
if(myContextMenu.classList.contains('show')) {
myContextMenu.classList.remove('show');
}
})
}());

 

onContextmenu="return false;"

これで右クリックを無効化することができます。

 

addEventListener('contextmenu', function(){});

右クリックのイベントはこのように記述します。

 

デフォルトの右クリックが使えないと不便なことが多いので、やたらめったら使うべきではありませんね。

まあ、そんな感じです。

スポンサードリンク

<WordPressで会員サイトが構築できるプラグイン「WP-Members」

CSSだけでボタンが出入りするトグルボタンを実装>

この記事をシェアする