はじめに
以下のように、オリジナルの右クリックを作ってみたいと思います。
画像の上で右クリックをしてみてください。
HTML
まずは以下のHTMLを記述しましょう。
<div id="contextmenu">
<ul>
<li>画像情報を表示</li>
</ul>
</div>bodyに対し、onContextmenu="return false; とすることで、通常の右クリックを非表示にします。
<body onContextmenu="return false;">CSS
2行目 : display: none;で非表示に。右クリックしたら現れるようにします。
3行目 : position: fixed;で、画面の一番手前（のレイヤー）に表示されます
18行目 : 文字を中央に配置
#contextmenu {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 250px;
height: 80px;
padding: 1rem;
border: 1px solid #888;
border-radius: 8px;
background-color: #fffefe;
box-shadow: 5px 5px 15px #333;
}
#contextmenu li {
cursor: pointer;
list-style: none;
}
#contextmenu ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}javascript
2行目 : 右クリックイベントを発火
3,4行目 : マウスの座標を取得し、その位置で右クリックのメニューを表示させる。
5行目 : メニューをフワッと表示させるためにクラスを追加。
6行目 : display: none ⇒ block
でメニューを表示させる。
7-9行目 : クラスを削除
12行目 : bodyをクリックしたら、メニューを非表示に。
window.onload = function () {
document.body.addEventListener("contextmenu", function (e) {
document.getElementById("contextmenu").style.left = e.pageX + "px";
document.getElementById("contextmenu").style.top = e.pageY + "px";
document.getElementById("contextmenu").classList.add("active");
document.getElementById("contextmenu").style.display = "block";
setTimeout(function () {
document.getElementById("contextmenu").classList.remove("active");
}, 1500);
});
document.body.addEventListener("click", function (e) {
document.getElementById("contextmenu").style.display = "none";
});
};HTMLのリストにonclickで関数を指定し、処理させる。
<div id="contextmenu">
<ul>
<li onclick="list();">画像情報を表示</li>
</ul>
</div>
まとめ
メニューのデザインや、onclickの関数を作り、 いろいろカスタマイズし、オリジナルの右クリックを作ってみましょう！
- bodyに対し、onContextmenu="return false; とすることで、通常の右クリックを非表示に
- document.body.addEventListener("contextmenu", function (e) {}で右クリックイベント発火
- bodyをクリックしたら、メニューを非表示に。
-
要素.style.left = e.pageX + "px";
要素.style.top = e.pageY + "px";
で、マウスの座標を取得し、その位置でメニューを表示させる
