如何从onclick div属性中检测Javascript中的控件+单击？

Question

我需要知道用户是否正在点击或控制点击div元素..我已经看到了如何使用事件监听器进行的示例..但我的代码已经设置到位,并且正在使用on-element onclick方法. .

HTML

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

JS

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

...也很想知道它是鼠标左键还是右键.

Answer 1

在处理程序中,检查window.event属性对象ctrlKey:

function selectMe(){
    if (window.event.ctrlKey) {
        //ctrl was held down during the click
    }
}

更新: 上面的解决方案取决于窗口对象上的专有属性,也许不应该指望它存在于所有浏览器中.幸运的是,我们现在有一份工作草案可以满足我们的需求,据MDN称,它得到了广泛的支持.例:

HTML

<span onclick="handler(event)">Click me</span>

JS

function handler(ev) {
  console.log('CTRL pressed during click:', ev.ctrlKey);
}

这同样适用于键盘事件

另请参见 KeyboardEvent.getModifierState()

Answer 2

我建议在文档上使用JQuery的keyup和keydown方法,因为它规范了事件代码,使一个解决方案成为crossbrowser.

对于右键单击,您可以使用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 3

因为这个问题首次提出已经有好几年了,所以其他答案已经过时或不完整.

这是使用jQuery的现代实现的代码:

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

至于检测右键单击,这是由另一个用户正确提供的,但我会在这里列出它只是为了让所有东西都放在一个地方.

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

Answer 4

当鼠标点击时ctrlKey是事件属性，可以作为 e.ctrlKey 访问。 Look down for example

$("xyz").click(function(e)){
  if(e.ctrlKey){
    //if ctrl key is pressed
  }
  else{
    // if ctrl key is not pressed
  }
}

注意：https : //www.w3schools.com/jsref/event_key_keycode.asp

Answer 5

试试这个代码，

$('#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。