javascript - onclick div属性からJavascriptでコントロール+クリックを検出する方法は?

Question

ユーザーがdiv要素をクリックしているか、それともコントロール クリックしているかを知る必要があります。 .

HTML

 <div id='1' onclick='selectMe()'>blah</div>

JS

 function selectMe(){
         //determine if this is a single click, or a cntrol click 
    }

...また、マウスの左ボタンまたは右ボタンのクリックかどうかも知りたいです。

Answer 1

2021 年更新: 現在、これを行うためのより良い方法があります。他の方の回答もぜひご覧ください

ドキュメントで JQuery の keyup および keydown メソッドを使用することをお勧めします。これは、イベント コードを正規化して、1 つのソリューション クロスブラウザーを作成するためです。

右クリックには oncontextmenu を使用できますが、IE8 ではバグが発生する可能性があることに注意してください。ここで互換性の表を参照してください。

http://www.quirksmode.org/dom/events/contextmenu.html

<p onclick="selectMe(1)" oncontextmenu="selectMe(2)">Click me</p>

$(document).keydown(function(event){
    if(event.which=="17")
        cntrlIsPressed = true;
});

$(document).keyup(function(){
    cntrlIsPressed = false;
});

var cntrlIsPressed = false;


function selectMe(mouseButton)
{
    if(cntrlIsPressed)
    {
        switch(mouseButton)
        {
            case 1:
                alert("Cntrl +  left click");
                break;
            case 2:
                alert("Cntrl + right click");
                break;
            default:
                break;
        }
    }


}

Answer 2

この質問が最初に尋ねられてから数年が経過しているため、他の回答は古くなっているか不完全です。

jQuery を使用した最新の実装のコードを次に示します。

$( 'div#1' ).on( 'click', function( event ) {
    if ( event.ctrlKey ) {
        //is ctrl + click
    } else {
        //normal click
    }
} );

右クリックの検出に関しては、これは別のユーザーによって正しく提供されましたが、すべてを 1 か所にまとめるためにここにリストします。

$( 'div#1' ).on( 'contextmenu', function( event ) {
    // right-click handler
} ) ;

Answer 3

このコードを試して、

$('#1').on('mousedown',function(e) {
   if (e.button==0 && e.ctrlKey) {
       alert('is Left Click');
   } else if (e.button==2 && e.ctrlKey){
       alert('is Right Click');
   }
});

申し訳ありませんが、e.ctrlKeyを追加しました。

Answer 4

純粋なJavaScript：

var ctrlKeyCode = 17;
var cntrlIsPressed = false;

document.addEventListener('keydown', function(event){
    if(event.which=="17")
        cntrlIsPressed = true;
});

document.addEventListener('keyup', function(){
    if(event.which=="17")
        cntrlIsPressed = true;
});



function selectMe(mouseButton)
{
    if(cntrlIsPressed)
    {
        switch(mouseButton)
        {
            case 1:
                alert("Cntrl +  left click");
                break;
            case 2:
                alert("Cntrl + right click");
                break;
            default:
                break;
        }
    }
}