カスタム右クリックメニューをWebページに追加する方法
自分のWebアプリケーションにカスタムの右クリックメニューを追加したい。ビルド済みのライブラリを使用せずにこれを実行できますか？もしそうなら、サードパーティのJavaScriptライブラリを使用しない簡単なカスタム右クリックメニューを表示するにはどうすればいいですか？
私はGoogle Docsがすることのような何かを目指しています。ユーザーは右クリックしてユーザーに自分のメニューを表示できます。
注：私は自分で作る方法を学びたいのですが、たいていの時から誰かがすでに作ったものを使うのですが、それらのサードパーティのライブラリは機能がいっぱいです私が必要とする機能だけが欲しいので、それは私が完全に手作りであることを望みます。
あなたの質問に答える - 以下のようにcontextmenuイベントを使います。
<html>
<head>
<script type="text/javascript">
if (document.addEventListener) { // IE >= 9; other browsers
document.addEventListener('contextmenu', function(e) {
alert("You've tried to open context menu"); //here you draw your own menu
e.preventDefault();
}, false);
} else { // IE < 9
document.attachEvent('oncontextmenu', function() {
alert("You've tried to open context menu");
window.event.returnValue = false;
});
}
</script>
</head>
<body>
Lorem ipsum...
</body>
</html>
しかし、あなたは自分自身に尋ねるべきです、あなたは本当にデフォルトの右クリックのふるまいを上書きしたいですか - それはあなたが開発しているアプリケーションに依存します。
私にとってとても役に立ちました。私のような人々のために、メニューの描画を期待して、私はここに私が右クリックメニューを作るために使用したコードを入れます：
HTML：contextmenu.html
<!doctype html>
<html>
<head>
<!-- jQuery should be at least version 1.7 -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="contextmenu.js"></script>
<link rel="stylesheet" href="contextmenu.css" />
</head>
<body>
<div id="test1">
<a href="www.google.com" class="test">Google</a>
<a href="www.google.com" class="test">Link 2</a>
<a href="www.google.com" class="test">Link 3</a>
<a href="www.google.com" class="test">Link 4</a>
</div>
<!-- initially hidden right-click menu -->
<div class="hide" id="rmenu">
<ul>
<li>
<a href="http://www.google.com">Google</a>
</li>
<li>
<a href="http://localhost:8080/login">Localhost</a>
</li>
<li>
<a href="C:\">C</a>
</li>
</ul>
</div>
</body>
</html>
CSS：contextmenu.css
.show {
z-index:1000;
position: absolute;
background-color:#C0C0C0;
border: 1px solid blue;
padding: 2px;
display: block;
margin: 0;
list-style-type: none;
list-style: none;
}
.hide {
display: none;
}
.show li{ list-style: none; }
.show a { border: 0 !important; text-decoration: none; }
.show a:hover { text-decoration: underline !important; }
JS：contextmenu.js - 受け入れられた答えから使用されます
$(document).ready(function() {
if ($("#test").addEventListener) {
$("#test").addEventListener('contextmenu', function(e) {
alert("You've tried to open context menu"); //here you draw your own menu
e.preventDefault();
}, false);
} else {
//document.getElementById("test").attachEvent('oncontextmenu', function() {
//$(".test").bind('contextmenu', function() {
$('body').on('contextmenu', 'a.test', function() {
//alert("contextmenu"+event);
document.getElementById("rmenu").className = "show";
document.getElementById("rmenu").style.top = mouseY(event) + 'px';
document.getElementById("rmenu").style.left = mouseX(event) + 'px';
window.event.returnValue = false;
});
}
});
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
function mouseX(evt) {
if (evt.pageX) {
return evt.pageX;
} else if (evt.clientX) {
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
} else {
return null;
}
}
function mouseY(evt) {
if (evt.pageY) {
return evt.pageY;
} else if (evt.clientY) {
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
} else {
return null;
}
}
いくつかのNice CSSと外部ライブラリのないいくつかの非標準のhtmlタグを組み合わせると Niceの結果が得られます（JSFiddle）
HTML
<menu id="ctxMenu">
<menu title="File">
<menu title="Save"></menu>
<menu title="Save As"></menu>
<menu title="Open"></menu>
</menu>
<menu title="Edit">
<menu title="Cut"></menu>
<menu title="Copy"></menu>
<menu title="Paste"></menu>
</menu>
</menu>
注：menuタグは存在しません、私はそれを作っています（あなたは何でも使うことができます）
CSS
#ctxMenu{
display:none;
z-index:100;
}
menu {
position:absolute;
display:block;
left:0px;
top:0px;
height:20px;
width:20px;
padding:0;
margin:0;
border:1px solid;
background-color:white;
font-weight:normal;
white-space:nowrap;
}
menu:hover{
background-color:#eef;
font-weight:bold;
}
menu:hover > menu{
display:block;
}
menu > menu{
display:none;
position:relative;
top:-20px;
left:100%;
width:55px;
}
menu[title]:before{
content:attr(title);
}
menu:not([title]):before{
content:"\2630";
}
JavaScriptはこの例にすぎません、私は個人的にはウィンドウの永続的なメニューのためにそれを削除します
var notepad = document.getElementById("notepad");
notepad.addEventListener("contextmenu",function(event){
event.preventDefault();
var ctxMenu = document.getElementById("ctxMenu");
ctxMenu.style.display = "block";
ctxMenu.style.left = (event.pageX - 10)+"px";
ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
var ctxMenu = document.getElementById("ctxMenu");
ctxMenu.style.display = "";
ctxMenu.style.left = "";
ctxMenu.style.top = "";
},false);
また、右から左に拡大するメニューの場合は、menu > menu{left:100%;}をmenu > menu{right:100%;}に変更することもできます。ただし、余白などを追加する必要があります
次のコードをbodyタグに追加して、コンテキストメニューを単純にブロックすることもできます。
<body oncontextmenu="return false;">
これにより、コンテキストメニューへのアクセスがすべてブロックされます（マウスの右ボタンからだけでなくキーボードからも）。
P.Sコンテキストメニューを無効にしたいタグにこれを追加できます。
例えば：
<div class="mydiv" oncontextmenu="return false;">
その特定のdivでのみコンテキストメニューを無効にします
ここの答えと他の流れによると、私はcss3への移行で、Google Chromeのもののように見えるバージョンを作りました。 JS Fiddle
このページには上記のjsがあるため、CSSとレイアウトについて心配することができます。使用するレイアウトは、キーボードショートカットを表示するための<a>要素を含む<img>要素、または素晴らしいフォントアイコン（<i class="fa fa-flag"></i>）と<span>です。だからこれは構造です：
<a href="#" onclick="doSomething()">
<img src="path/to/image.gif" />
This is a menu option
<span>Ctrl + K</span>
</a>
これらをdivに入れて右クリックでそのdivを表示します。 Google Chromeのようにスタイルを設定しましょう。
#menu a {
display: block;
color: #555;
text-decoration: no[...]
それでは、受け入れられた回答からコードを追加し、カーソルのXとYの値を取得します。これを行うには、e.clientXとe.clientYを使います。クライアントを使用しているので、メニューdivを修正する必要があります。
var i = document.getElementById("menu").style;
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
var posX = e.clientX;
var posY = e.client[...]
そしてそれはそれです！ CSSトランジションを追加するだけで、フェードインおよびフェードアウトして完了です。
var i = document.getElementById("menu").style;
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
var posX = e.clientX;
var posY = e.clientY;
menu(posX, posY);
e.preventDefault();
}, false);
document.addEventListener('click', function(e) {
i.opacity = "0";
setTimeout(function() {
i.visibility = "hidden";
}, 501);
}, false);
} else {
document.attachEvent('oncontextmenu', function(e) {
var posX = e.clientX;
var posY = e.clientY;
menu(posX, posY);
e.preventDefault();
});
document.attachEvent('onclick', function(e) {
i.opacity = "0";
setTimeout(function() {
i.visibility = "hidden";
}, 501);
});
}
function menu(x, y) {
i.top = y + "px";
i.left = x + "px";
i.visibility = "visible";
i.opacity = "1";
}body {
background: white;
font-family: sans-serif;
color: #5e5e5e;
}
#menu {
visibility: hidden;
opacity: 0;
position: fixed;
background: #fff;
color: #555;
font-family: sans-serif;
font-size: 11px;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
-webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
-moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
padding: 0px;
border: 1px solid #C6C6C6;
}
#menu a {
display: block;
color: #555;
text-decoration: none;
padding: 6px 8px 6px 30px;
width: 250px;
position: relative;
}
#menu a img,
#menu a i.fa {
height: 20px;
font-size: 17px;
width: 20px;
position: absolute;
left: 5px;
top: 2px;
}
#menu a span {
color: #BCB1B3;
float: right;
}
#menu a:hover {
color: #fff;
background: #3879D9;
}
#menu hr {
border: 1px solid #EBEBEB;
border-bottom: 0;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<h2>CSS3 and JAVASCRIPT custom menu.</h2>
<em>Stephan Stanisic | Lisence free</em>
<p>Right-click anywhere on this page to open the custom menu. Styled like the Google Chrome contextmenu. And yes, you can use <i class="fa fa-flag"></i>font-awesome</p>
<p style="font-size: small">
<b>Lisence</b>
<br /> "THE PIZZA-WARE LICENSE" (Revision 42):
<br /> You can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a Pizza in return.
<br />
<a style="font-size:xx-small" href="https://github.com/KLVN/UrbanDictionary_API#license">https://github.com/KLVN/UrbanDictionary_API#license</a>
</p>
<br />
<br />
<small>(The white body background is just because I hate the light blue editor background on the result on jsfiddle)</small>
<div id="menu">
<a href="#">
<img src="http://puu.sh/nr60s/42df867bf3.png" /> AdBlock Plus <span>Ctrl + ?!</span>
</a>
<a href="#">
<img src="http://puu.sh/nr5Z6/4360098fc1.png" /> SNTX <span>Ctrl + ?!</span>
</a>
<hr />
<a href="#">
<i class="fa fa-fort-awesome"></i> Fort Awesome <span>Ctrl + ?!</span>
</a>
<a href="#">
<i class="fa fa-flag"></i> Font Awesome <span>Ctrl + ?!</span>
</a>
</div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Context menu - LabLogic.net</title>
</head>
<body>
<script language="javascript" type="text/javascript">
document.oncontextmenu=RightMouseDown;
document.onmousedown = mouseDown;
function mouseDown(e) {
if (e.which==3) {//righClick
alert("Right-click menu goes here");
}
}
function RightMouseDown() { return false; }
</script>
</body>
</html>
テスト済みで、Opera 11.6、Firefox 9.01、Internet Explorer 9、およびchrome 17で動作します。 javascriptの右クリックメニュー で作業サンプルをチェックアウトできます。
私はこれがすでに答えられていることを知っています、しかし私はネイティブのコンテキストメニューが消えるようにするために2番目の答えと取り組むのにしばらく時間を費やしました そして ユーザーがクリックした場所に表示されます。
HTML
<body>
<div id="test1">
<a href="www.google.com" class="test">Google</a>
<a href="www.google.com" class="test">Link 2</a>
<a href="www.google.com" class="test">Link 3</a>
<a href="www.google.com" class="test">Link 4</a>
</div>
<!-- initially hidden right-click menu -->
<div class="hide" id="rmenu">
<ul>
<li class="White">White</li>
<li>Green</li>
<li>Yellow</li>
<li>Orange</li>
<li>Red</li>
<li>Blue</li>
</ul>
</div>
</body>
CSS
.hide {
display: none;
}
#rmenu {
border: 1px solid black;
background-color: white;
}
#rmenu ul {
padding: 0;
list-style: none;
}
#rmenu li
{
list-style: none;
padding-left: 5px;
padding-right: 5px;
}
JavaScript
if (document.getElementById('test1').addEventListener) {
document.getElementById('test1').addEventListener('contextmenu', function(e) {
$("#rmenu").toggleClass("hide");
$("#rmenu").css(
{
position: "absolute",
top: e.pageY,
left: e.pageX
}
);
e.preventDefault();
}, false);
}
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
これを試して
$(function() {
var doubleClicked = false;
$(document).on("contextmenu", function (e) {
if(doubleClicked == false) {
e.preventDefault(); // To prevent the default context menu.
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("bottom", "auto");
} else {
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("bottom", "auto");
}
$("#contextMenuContainer").fadeIn(500, FocusContextOut());
doubleClicked = true;
} else {
e.preventDefault();
doubleClicked = false;
$("#contextMenuContainer").fadeOut(500);
}
});
function FocusContextOut() {
$(document).on("click", function () {
doubleClicked = false;
$("#contextMenuContainer").fadeOut(500);
$(document).off("click");
});
}
});
要素ID、リンクなどの定義済み命名規則に基づいていますが、真に動的な右クリックコンテキストメニューのための純粋なJSおよびcssソリューション。 jsfiddle およびコピーできるコードを1つの静的なHTMLページに貼り付けます。
<html>
<head>
<style>
.cls-context-menu-link {
display:block;
padding:20px;
background:#ECECEC;
}
.cls-context-menu { position:absolute; display:none; }
.cls-context-menu ul, #context-menu li {
list-style:none;
margin:0; padding:0;
background:white;
}
.cls-context-menu { border:solid 1px #CCC;}
.cls-context-menu li { border-bottom:solid 1px #CCC; }
.cls-context-menu li:last-child { border:none; }
.cls-context-menu li a {
display:block;
padding:5px 10px;
text-decoration:none;
color:blue;
}
.cls-context-menu li a:hover {
background:blue;
color:#FFF;
}
</style>
</head>
<body>
<!-- those are the links which should present the dynamic context menu -->
<a id="link-1" href="#" class="cls-context-menu-link">right click link-01</a>
<a id="link-2" href="#" class="cls-context-menu-link">right click link-02</a>
<!-- this is the context menu -->
<!-- note the string to=0 where the 0 is the digit to be replaced -->
<div id="div-context-menu" class="cls-context-menu">
<ul>
<li><a href="#to=0">link-to=0 -item-1 </a></li>
<li><a href="#to=0">link-to=0 -item-2 </a></li>
<li><a href="#to=0">link-to=0 -item-3 </a></li>
</ul>
</div>
<script>
var rgtClickContextMenu = document.getElementById('div-context-menu');
/** close the right click context menu on click anywhere else in the page*/
document.onclick = function(e){
rgtClickContextMenu.style.display = 'none';
}
/**
present the right click context menu ONLY for the elements having the right class
by replacing the 0 or any digit after the "to-" string with the element id , which
triggered the event
*/
document.oncontextmenu = function(e){
//alert(e.target.id)
var elmnt = e.target
if ( elmnt.className.startsWith ( "cls-context-menu")) {
e.preventDefault();
var eid = elmnt.id.replace(/link-/,"")
rgtClickContextMenu.style.left = e.pageX + 'px'
rgtClickContextMenu.style.top = e.pageY + 'px'
rgtClickContextMenu.style.display = 'block'
var toRepl = "to=" + eid.toString()
rgtClickContextMenu.innerHTML = rgtClickContextMenu.innerHTML.replace(/to=\d+/g,toRepl)
//alert(rgtClickContextMenu.innerHTML.toString())
}
}
</script>
</body>
</html>
これは非常に良い カスタムコンテキストメニューの作り方のチュートリアル です。
あなたはそれらの GitHubのデモコード も見つけることができます。
それらはあなたがあなた自身の右クリックコンテキストメニュー（html、cssとjavascriptコードを含む）を構築するために従うことができ、そして完全な例コードを与えることによってそれを最後にまとめることができる詳細なステップバイステップ説明を与えます。
あなたは簡単に従うことができ、あなた自身の必要性にそれを適応させることができます。そして、JQueryや他のライブラリは必要ありません。
これが彼らの例のメニューコードがどのようであるかです：
<nav id="context-menu" class="context-menu">
<ul class="context-menu__items">
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="View"><i class="fa fa-eye"></i> View Task</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Edit"><i class="fa fa-edit"></i> Edit Task</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Delete"><i class="fa fa-times"></i> Delete Task</a>
</li>
</ul>
</nav>
あなたはこのコードでそれをすることができます。自動エッジ検出を使用した完全なチュートリアルについてはこちらをご覧ください http://www.voidtricks.com/custom-right-click-context-menu/
$(document).ready(function () {
$("html").on("contextmenu",function(e){
//prevent default context menu for right click
e.preventDefault();
var menu = $(".menu");
//hide menu if already shown
menu.hide();
//get x and y values of the click event
var pageX = e.pageX;
var pageY = e.pageY;
//position menu div near mouse cliked area
menu.css({top: pageY , left: pageX});
var mwidth = menu.width();
var mheight = menu.height();
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//if window is scrolled
var scrTop = $(window).scrollTop();
//if the menu is close to right Edge of the window
if(pageX+mwidth > screenWidth){
menu.css({left:pageX-mwidth});
}
//if the menu is close to bottom Edge of the window
if(pageY+mheight > screenHeight+scrTop){
menu.css({top:pageY-mheight});
}
//finally show the menu
menu.show();
});
$("html").on("click", function(){
$(".menu").hide();
});
});
`
テスト済みで、Opera 12.17、Firefox 30、Internet Explorer 9、およびChrome 26.0.1410.64で動作します。
document.oncontextmenu =function( evt ){
alert("OK?");
return false;
}
簡単な方法は、onContextMenuを使用してJavaScript関数を返すことです。
<input type="button" value="Example" onContextMenu="return RightClickFunction();">
<script>
function RightClickFunction() {
// Enter your code here;
return false;
}
</script>
そしてreturn false;を入力することでコンテキストメニューをキャンセルします。
それでもコンテキストメニューを表示したい場合は、return false;行を削除するだけです。
<script language="javascript" type="text/javascript">
document.oncontextmenu = RightMouseDown;
document.onmousedown = mouseDown;
function mouseDown(e) {
if (e.which==3) {//righClick
alert("Right-click menu goes here");
}
}
function RightMouseDown() {
return false;
}
</script>
</body>
</html>
<html>
<head>
<style>
.rightclick {
/* YOUR CONTEXTMENU'S CSS */
visibility: hidden;
background-color: white;
border: 1px solid grey;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div class="rightclick" id="ya">
<p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
</div>
<p>Right click to get sweet results!</p>
</body>
<script>
document.onclick = noClick;
document.oncontextmenu = rightClick;
function rightClick(e) {
e = e || window.event;
e.preventDefault();
document.getElementById("ya").style.visibility = "visible";
console.log("Context Menu v1.3.0 by IamGuest opened.");
}
function noClick() {
document.getElementById("ya").style.visibility = "hidden";
console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>
見栄えがよく、より効率的なコンテキストメニューを作成するために、このコードを微調整して変更することができます。既存のコンテキストメニューの変更に関しては、どうすればよいかわかりません...これをチェックしてくださいフィドル組織的な観点から。また、コンテキストメニューの項目をクリックしてみてください。彼らはあなたにいくつかの素晴らしいメッセージを知らせるべきです。うまくいかない場合は、もっと試してみてください...複雑です。
私は次のようなものを使用しています jsfiddle
function onright(el, cb) {
//disable right click
document.body.oncontextmenu = 'return false';
el.addEventListener('contextmenu', function (e) { e.preventDefault(); return false });
el.addEventListener('mousedown', function (e) {
e = e || window.event;
if (~~(e.button) === 2) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
return false;
}
});
// then bind Your cb
el.addEventListener('mousedown', function (e) {
e = e || window.event;
~~(e.button) === 2 && cb.call(el, e);
});
}
古いIEブラウザをターゲットにしている場合は、とにかく 'attachEventを使用して完了する必要があります。場合
Firefox専用のソリューションを使用するかどうかを覚えておいてください。ドキュメント全体に追加する場合は、contextmenu="mymenu"をbodyタグではなく<html>に追加する必要があります。
あなたはこれに注意を払うべきです。
<script>
function fun(){
document.getElementById('menu').style.display="block";
}
</script>
<div id="menu" style="display: none"> menu items</div>
<body oncontextmenu="fun();return false;">
ここでやっていること
- あなた自身のカスタムdivメニューを作成して、位置を設定します：絶対と表示：ケースではなし.
- クリックされるページまたは要素にoncontextmenuイベントを追加します。
- Falseを返してデフォルトのブラウザアクションをキャンセルします。
ユーザーjsが自分のアクションを起動します。