jQueryでマウスの左クリックと右クリックを区別する方法


574

jQueryを使用して、クリックされたマウスボタンをどのように取得しますか?

$('div').bind('click', function(){
    alert('clicked');
});

これは右クリックと左クリックの両方でトリガーされます。右マウスクリックをキャッチする方法は何ですか。以下のようなものがあれば幸いです。

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

回答:


900

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!');
    }
});

4
@Jeff Hines-Chromeで右クリックを検出しようとしたところ、ここに示されている実装は正常に機能しているように見えましたが、これは、alert()がコンテキストメニューの表示を妨げているためであることに気付きました。:( boo
jinglesthula

15
下にスクロールし続け、必ず@JeffHinesの回答を読んでください。基本的に、jQueryにはイベント 'contextmenu'としてこれが組み込まれています。
jpadvo 2011

8
@jpadvo jQueryは「contextmenu」としてビルドしませんでしたcontextmenu。ブラウザのネイティブです。ネイティブJavaScriptでは、oncontextmenuイベントに添付できます。
Naftali別名Neal

6
ie8:プロパティ 'which'の値を取得できません:オブジェクトがnullまたは未定義
Simon

2
イベントが発生した後にコンテキストメニューが表示されないようにすることはできますか?
kmoney12 2013

251

編集:私.on()はjQuery 1.7以上を使用して動的に追加された要素で機能するように変更しました:

$(document).on("contextmenu", ".element", function(e){
   alert('Context Menu event has fired!');
   return false;
});

デモ:jsfiddle.net/Kn9s7/5

[元の投稿の開始]これは私のために働いたものです:

$('.element').bind("contextmenu",function(e){
   alert('Context Menu event has fired!');
   return false;
}); 

複数のソリューションを利用している場合^^

編集:Tim Downは、常にイベントright-clickを発生させるのcontextmenuではなく、コンテキストメニューキーが押されたとき(これは間違いなくの代わりになるright-click)の良い点をもたらします。


28
これは受け入れられる答えになるはずです。このイベントは、関連するすべてのブラウザーで機能し、クリック全体(マウスダウン+マウスアップで近接)でトリガーされます。
Nick Retallack、2011

3
これは、<
textarea

17
右クリックは、コンテキストメニューをトリガーする唯一の方法ではありません。
Tim Down

3
contextmenuイベントの発生は常にマウスの右ボタンがクリックされたことを意味するわけではないため、これは間違ったアプローチだと思います。正しい方法は、マウスイベントからボタン情報を取得することです(clickこの場合)。
Tim Down

1
おい!おかげで、これは素晴らしいように見えますが、テーブルの行や本体などの要素にバインドすることはできません。$(window)で動作します。私はbackbone.jsを使用して#mainに新しいコンテンツなどを入力します
Harry

84

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! */
    }
});

3
上記でリンクされているjQueryプラグインがe.button==2代わりに使用されています。
ceejayoz、2009年

6
うん。で使用されているボタンの数が異なるため、event.buttonクロスブラウザーを使用する方が問題です。2009年1月のこの記事をご覧ください-unixpapa.com/js/mouse.htmlevent.whichevent.button
Russ Cam

1
これはmouseup、人が本当にアイテムをクリックしたことを確認する方が良いのではないでしょうか?誤って何かをクリックしてしまった場合、マウスボタンを押したまま要素の外側にドラッグすることで、クリックを防ぐことができます。
Chris Marisic 14

1
@ChrisMarisic mouseupはおそらくより良いイベントです。これはevent.whichマウスボタンクリックの使用例にすぎません
Russ Cam

39

あなたはすることもできbindcontextmenureturn 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.

デモ:http : //jsfiddle.net/maniator/WS9S2/283/


1
@Raynosはい、しかし、それが右クリックイベントを処理する唯一の方法です。コンテキストメニューがまだ表示されている場合は、右クリックしても何もできません。
Naftali別名Neal

1
@Raynos -確か以上存在するよう内部ツールを構築したり、あなた自身の個人的なuse..I'mのために何かをコーディングするなど、あなたのポイントが有効でない多くの例がある
VSYNC

1
実際にjQueryイベントハンドラーの1つ(たとえばクリック)のように動作させたい場合はmethod.call(this, e);method();そのようにするのでmethodはなく、正しい値を取得しthis、イベントオブジェクトを正しく渡します。
ジェレミーT

@JeremyTは本当です...コールバックは任意の方法で処理できます^ _ ^
Naftali別名Neal

30

$("#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>


1
これはmsie固有ですか?つまり、他のブラウザ間で移植可能ですか?
Taryn East

13
この方法は、event.whichブラウザ間の互換性を排除するために導入されたため、現在は不要です。
ドングリ

8
私はeventを疑っています。これは実際にはクロスブラウザの非互換性を排除しますが、それは私だけです。
DwB 2011年


15

非常に良い答えはたくさんありますが、を使用する際のIE9とIE <9の大きな違いについて触れておきたいと思いevent.buttonます。

古いマイクロソフトの仕様によると、event.buttonコードはW3Cで使用されているものとは異なります。W3Cは3つのケースのみを考慮します。

  1. マウスの左ボタンがクリックされた- event.button === 1
  2. マウスの右ボタンがクリックされた- event.button === 3
  3. マウスの中ボタンをクリックした- event.button === 2

ただし、古いInternet Explorerでは、押されたボタンがMicrosoftで少し反転し、8つのケースがあります。

  1. ボタンがクリックされていない- event.button === 0または000
  2. 左ボタンがクリックされた- event.button === 1または001
  3. 右ボタンがクリックされた- event.button === 2または010
  4. 左と右のボタンがクリックされた- event.button === 3または011
  5. 中央ボタンがクリックされた- event.button === 4または100
  6. 中央と左のボタンがクリックされた- event.button === 5または101
  7. 中央ボタンと右ボタンがクリックされた- event.button === 6または110
  8. 3つのボタンすべてがクリックされた- event.button === 7または111

これが理論的にはどのように機能するかという事実にもかかわらず、2つまたは3つのボタンが同時に押された場合をサポートするInternet Explorerはありません。W3C標準では理論的にこれをサポートすることさえできないため、これについて言及します。


6
したがって、event.button === 0ボタンを押すと、ボタンがクリックされていない状態で表示されます。すばらしいIEಠ_ಠ
Sinan

これはIEのバージョンが9未満の場合に発生します
Konstantin Dinev

開発者がまとめてサポートを選択するのをやめた場合、人々は切り替える必要があり、開発者はサポートを心配する必要がなくなります。
ahnbizcad 2015

8

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"); }

参照:「ミドルクリックを使用したonclickイベントのトリガー」への回答


3

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

1

あなたができる「より良い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)}();

1
$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});

あなたはおそらくそれが機能する理由にいくつかの詳細を追加する必要があります。-同意するが、理由をn00bに説明していない。
アダムコプリー

0
$(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;

    }


});

@ Nitin.Katti:-これは、マウスの左ボタンをフリーズすると、マウスポイントと左ボタンクリックで処理され、サイズ変更が停止します。
user2335866 2013

0

jqueryであなたは使うことができます event object type

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});

0

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

私のPCでは、中マウスが4つに見えました(Ubuntu 14.04-FireFox)。私は、左と右を合わせて3、中央を4と考えています。「クロスブラウザー」、「クロスプラットフォーム」の方法を改善する必要があります...
Paul

0
$.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");
}); 

0

彼らはまたは使用してはなりません場合は、それらに思っている人event.whichバニラJS角度:それは今だ非推奨ので使って好みevent.buttonsの代わりに。

注:このメソッドと(マウスダウン)イベントの場合:

  • 左クリックプレスは1に関連付けられています
  • 右クリックプレスは2に関連付けられています
  • スクロールボタンの押下は4に関連付けられています

そして、(のmouseup)イベントがしますしないで同じ番号を返しますが、0の代わりに。

ソース:https : //developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons


-1
    $.event.special.rightclick = {
     bindType: "contextmenu",
        delegateType: "contextmenu"
      };

   $(document).on("rightclick", "div", function() {
   console.log("hello");
    return false;
    });

1
こんにちは。この回答には削除の低品質のフラグが付けられています。少し前に回答された質問に回答を追加したようです。この貢献が受け入れられた回答をどのように改善するかを説明する回答に説明がない限り、私も削除するよう投票する傾向があります。
Popnoodles 2014年

1
@popnoodles、それは大丈夫ですが、繰り返すことはありません。
Yip Man WingChun 2014年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.