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的{{1}}对象：

ctrlKey

<强>更新上面的解决方案取决于窗口对象上的proprietary property，也许不应该指望它存在于所有浏览器中。幸运的是，我们现在有working draft来满足我们的需求，并且根据MDN，it is widely supported。例如：

HTML 的

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

JS

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

The same applies for keyboard events

另见 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

试试这个：

var control = false;
$(document).on('keyup keydown', function(e) {
  control = e.ctrlKey;
});

$('div#1').on('click', function() {
  if (control) {
    // control-click
  } else {
    // single-click
  }
});

右键单击会触发contextmenu事件，因此：

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

Answer 6

纯javascript：

var ctrlKeyCode = 17;

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 7

按键后无法检测到按键是否已关闭。您只能监控js中的关键事件。在您的情况下，我建议使用按键事件更改onclick，然后通过事件键码检测它是否为控制键，然后您可以添加点击事件。

Answer 8

试试这段代码，

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

仅从上方开始编辑，以便立即使用

<script>
    var control = false;
    $(document).on('keyup keydown', function (e) {
        control = e.ctrlKey;
    });

    $(function () {
        $('#1x').on('click', function () {
            if (control) {
                // control-click
                alert("Control+Click");
            } else {
                // single-click
                alert("Single Click");
            }
        });
    }); 

</script>
<p id="1x">Click me</p>

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

9 个答案: