回答:
jQueryバージョン1.1.3以降では、event.which
正規化されevent.keyCode
ているevent.charCode
ため、ブラウザーの互換性の問題を心配する必要はありません。に関するドキュメントevent.which
event.which
マウスの左ボタン、中ボタン、右ボタンにそれぞれ1、2、または3を指定します。
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left Mouse button pressed.');
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
break;
default:
alert('You have a strange Mouse!');
}
});
contextmenu
。ブラウザのネイティブです。ネイティブJavaScriptでは、oncontextmenu
イベントに添付できます。
編集:私.on()
はjQuery 1.7以上を使用して動的に追加された要素で機能するように変更しました:
$(document).on("contextmenu", ".element", function(e){
alert('Context Menu event has fired!');
return false;
});
[元の投稿の開始]これは私のために働いたものです:
$('.element').bind("contextmenu",function(e){
alert('Context Menu event has fired!');
return false;
});
複数のソリューションを利用している場合^^
編集:Tim Downは、常にイベントright-click
を発生させるのcontextmenu
ではなく、コンテキストメニューキーが押されたとき(これは間違いなくの代わりになるright-click
)の良い点をもたらします。
contextmenu
イベントの発生は常にマウスの右ボタンがクリックされたことを意味するわけではないため、これは間違ったアプローチだと思います。正しい方法は、マウスイベントからボタン情報を取得することです(click
この場合)。
which
マウスイベントのイベントオブジェクトのプロパティを確認することで、どのマウスボタンが押されたかを簡単に確認できます。
/*
1 = Left mouse button
2 = Centre mouse button
3 = Right mouse button
*/
$([selector]).mousedown(function(e) {
if (e.which === 3) {
/* Right mouse button was clicked! */
}
});
e.button==2
代わりに使用されています。
event.button
クロスブラウザーを使用する方が問題です。2009年1月のこの記事をご覧ください-unixpapa.com/js/mouse.htmlevent.which
event.button
mouseup
、人が本当にアイテムをクリックしたことを確認する方が良いのではないでしょうか?誤って何かをクリックしてしまった場合、マウスボタンを押したまま要素の外側にドラッグすることで、クリックを防ぐことができます。
mouseup
はおそらくより良いイベントです。これはevent.which
マウスボタンクリックの使用例にすぎません
あなたはすることもできbind
へcontextmenu
とreturn false
:
$('selector').bind('contextmenu', function(e){
e.preventDefault();
//code
return false;
});
デモ:http : //jsfiddle.net/maniator/WS9S2/
または、同じことをするクイックプラグインを作成することもできます。
(function( $ ) {
$.fn.rightClick = function(method) {
$(this).bind('contextmenu rightclick', function(e){
e.preventDefault();
method();
return false;
});
};
})( jQuery );
デモ:http : //jsfiddle.net/maniator/WS9S2/2/
.on(...)
jQuery> = 1.7の使用:
$(document).on("contextmenu", "selector", function(e){
e.preventDefault();
//code
return false;
}); //does not have to use `document`, it could be any container element.
method.call(this, e);
、method();
そのようにするのでmethod
はなく、正しい値を取得しthis
、イベントオブジェクトを正しく渡します。
$("#element").live('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert("Left Button");
}
else if(e.button == 2){
alert("Right Button");
}
});
現状の更新:
var $log = $("div.log");
$("div.target").on("mousedown", function() {
$log.text("Which: " + event.which);
if (event.which === 1) {
$(this).removeClass("right middle").addClass("left");
} else if (event.which === 2) {
$(this).removeClass("left right").addClass("middle");
} else if (event.which === 3) {
$(this).removeClass("left middle").addClass("right");
}
});
div.target {
border: 1px solid blue;
height: 100px;
width: 100px;
}
div.target.left {
background-color: #0faf3d;
}
div.target.right {
background-color: #f093df;
}
div.target.middle {
background-color: #00afd3;
}
div.log {
text-align: left;
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>
event.which
ブラウザ間の互換性を排除するために導入されたため、現在は不要です。
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
非常に良い答えはたくさんありますが、を使用する際のIE9とIE <9の大きな違いについて触れておきたいと思いevent.button
ます。
古いマイクロソフトの仕様によると、event.button
コードはW3Cで使用されているものとは異なります。W3Cは3つのケースのみを考慮します。
event.button === 1
event.button === 3
event.button === 2
ただし、古いInternet Explorerでは、押されたボタンがMicrosoftで少し反転し、8つのケースがあります。
event.button === 0
または000event.button === 1
または001event.button === 2
または010event.button === 3
または011event.button === 4
または100event.button === 5
または101event.button === 6
または110event.button === 7
または111これが理論的にはどのように機能するかという事実にもかかわらず、2つまたは3つのボタンが同時に押された場合をサポートするInternet Explorerはありません。W3C標準では理論的にこれをサポートすることさえできないため、これについて言及します。
event.button === 0
ボタンを押すと、ボタンがクリックされていない状態で表示されます。すばらしいIEಠ_ಠ
TheVillageIdiotの答えを少し調整すると、よりクリーンになるように思えます。
$('#element').bind('click', function(e) {
if (e.button == 2) {
alert("Right click");
}
else {
alert("Some other click");
}
}
編集:JQueryはe.which
属性を提供し、左クリック、中クリック、右クリックに対してそれぞれ1、2、3を返します。だからあなたも使うことができますif (e.which == 3) { alert("right click"); }
event.which === 1
左クリックであることを確認します(jQueryを使用する場合)。
ただし、修飾キーについても考慮する必要があります。 ctrlcmdshiftalt
単純な変更されていない左クリックをキャッチすることにのみ関心がある場合は、次のようなことができます。
var isSimpleClick = function (event) {
return !(
event.which !== 1 || // not a left click
event.metaKey || // "open link in new tab" (mac)
event.ctrlKey || // "open link in new tab" (windows/linux)
event.shiftKey || // "open link in new window"
event.altKey // "save link as"
);
};
$('a').on('click', function (event) {
if (isSimpleClick(event)) {
event.preventDefault();
// do something...
}
});
あなたができる「より良いJavascriptマウスイベント」を探しているなら
上記のイベントをトリガーし、頭痛の種の仕事を取り除くこのクロスブラウザーの通常のJavaScriptを見てください。コピーしてスクリプトの先頭に貼り付けるか、または<head>
、ドキュメントののます。次に、イベントをバインドします。以下のコードブロックを参照して、イベントをキャプチャし、それに割り当てられた関数を起動するjqueryの例を示しますが、これは通常のJavaScriptバインディングでも機能します。
動作を確認することに興味がある場合は、jsFiddleをご覧ください:https ://jsfiddle.net/BNefn/
/**
Better Javascript Mouse Events
Author: Casey Childers
**/
(function(){
// use addEvent cross-browser shim: https://gist.github.com/dciccale/5394590/
var addEvent = function(a,b,c){try{a.addEventListener(b,c,!1)}catch(d){a.attachEvent('on'+b,c)}};
/* This function detects what mouse button was used, left, right, middle, or middle scroll either direction */
function GetMouseButton(e) {
e = window.event || e; // Normalize event variable
var button = '';
if (e.type == 'mousedown' || e.type == 'click' || e.type == 'contextmenu' || e.type == 'mouseup') {
if (e.which == null) {
button = (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right");
} else {
button = (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right");
}
} else {
var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
switch (direction) {
case 120:
case 240:
case 360:
button = "up";
break;
case -120:
case -240:
case -360:
button = "down";
break;
}
}
var type = e.type
if(e.type == 'contextmenu') {type = "click";}
if(e.type == 'DOMMouseScroll') {type = "mousewheel";}
switch(button) {
case 'contextmenu':
case 'left':
case 'middle':
case 'up':
case 'down':
case 'right':
if (document.createEvent) {
event = new Event(type+':'+button);
e.target.dispatchEvent(event);
} else {
event = document.createEventObject();
e.target.fireEvent('on'+type+':'+button, event);
}
break;
}
}
addEvent(window, 'mousedown', GetMouseButton);
addEvent(window, 'mouseup', GetMouseButton);
addEvent(window, 'click', GetMouseButton);
addEvent(window, 'contextmenu', GetMouseButton);
/* One of FireFox's browser versions doesn't recognize mousewheel, we account for that in this line */
var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
addEvent(window, MouseWheelEvent, GetMouseButton);
})();
より良いマウスクリックイベントの例(簡単にするためにjqueryを使用しますが、上記はブラウザー間で動作し、同じイベント名を起動します。IEは名前の前に使用します)
<div id="Test"></div>
<script type="text/javascript">
$('#Test').on('mouseup',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:left',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:middle',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:right',function(e){$(this).append(e.type+'<br />');})
.on('click',function(e){$(this).append(e.type+'<br />');})
.on('click:left',function(e){$(this).append(e.type+'<br />');})
.on('click:middle',function(e){$(this).append(e.type+'<br />');})
.on('click:right',function(e){$(this).append(e.type+'<br />');})
.on('mousedown',function(e){$(this).html('').append(e.type+'<br />');})
.on('mousedown:left',function(e){$(this).append(e.type+'<br />');})
.on('mousedown:middle',function(e){$(this).append(e.type+'<br />');})
.on('mousedown:right',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel:up',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel:down',function(e){$(this).append(e.type+'<br />');})
;
</script>
そして、縮小版が必要な人のために...
!function(){function e(e){e=window.event||e;var t="";if("mousedown"==e.type||"click"==e.type||"contextmenu"==e.type||"mouseup"==e.type)t=null==e.which?e.button<2?"left":4==e.button?"middle":"right":e.which<2?"left":2==e.which?"middle":"right";else{var n=e.detail?-120*e.detail:e.wheelDelta;switch(n){case 120:case 240:case 360:t="up";break;case-120:case-240:case-360:t="down"}}var c=e.type;switch("contextmenu"==e.type&&(c="click"),"DOMMouseScroll"==e.type&&(c="mousewheel"),t){case"contextmenu":case"left":case"middle":case"up":case"down":case"right":document.createEvent?(event=new Event(c+":"+t),e.target.dispatchEvent(event)):(event=document.createEventObject(),e.target.fireEvent("on"+c+":"+t,event))}}var t=function(e,t,n){try{e.addEventListener(t,n,!1)}catch(c){e.attachEvent("on"+t,n)}};t(window,"mousedown",e),t(window,"mouseup",e),t(window,"click",e),t(window,"contextmenu",e);var n=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";t(window,n,e)}();
$(document).ready(function () {
var resizing = false;
var frame = $("#frame");
var origHeightFrame = frame.height();
var origwidthFrame = frame.width();
var origPosYGrip = $("#frame-grip").offset().top;
var origPosXGrip = $("#frame-grip").offset().left;
var gripHeight = $("#frame-grip").height();
var gripWidth = $("#frame-grip").width();
$("#frame-grip").mouseup(function (e) {
resizing = false;
});
$("#frame-grip").mousedown(function (e) {
resizing = true;
});
document.onmousemove = getMousepoints;
var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
function getMousepoints() {
if (resizing) {
var MouseBtnClick = event.which;
if (MouseBtnClick == 1) {
scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
mousex = event.clientX + scrollLeft;
mousey = event.clientY + scrollTop;
frame.height(mousey);
frame.width(mousex);
}
else {
resizing = false;
}
}
return true;
}
});
jqueryであなたは使うことができます event object type
jQuery(".element").on("click contextmenu", function(e){
if(e.type == "contextmenu") {
alert("Right click");
}
});
JQueryなしでそれを行う方法もあります!
これをチェックしてください:
document.addEventListener("mousedown", function(evt) {
switch(evt.buttons) {
case 1: // left mouse
case 2: // right mouse
case 3: // middle mouse <- I didn't tested that, I just got a touchpad
}
});
$.fn.rightclick = function(func){
$(this).mousedown(function(event){
if(event.button == 2) {
var oncontextmenu = document.oncontextmenu;
document.oncontextmenu = function(){return false;};
setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
func(event);
return false;
}
});
};
$('.item').rightclick(function(e){
alert("item");
});
彼らはまたは使用してはなりません場合は、それらに思っている人event.which
にバニラJSや角度:それは今だ非推奨ので使って好みevent.buttons
の代わりに。
注:このメソッドと(マウスダウン)イベントの場合:
そして、(のmouseup)イベントがしますしないで同じ番号を返しますが、0の代わりに。
ソース:https : //developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});