web-dev-qa-db-fra.com

Comment détecter control + click en Javascript à partir d'un attribut div onclick?

J'ai besoin de savoir si l'utilisateur clique ou contrôle en cliquant sur un élément div .. J'ai vu des exemples sur la façon de le faire en utilisant des écouteurs d'événement .. mais mes codes sont déjà définis onclick méthode .. 

HTML

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

JS

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

... aimerait également savoir s’il s’agissait d’un clic gauche ou droit.

javascriptjquery
36
BrownChiLD

Je vous recommande d'utiliser les méthodes keyup et keydown de JQuery sur le document, dans la mesure où il normalise les codes d'événement, pour créer un seul navigateur pour la solution.

Pour le clic droit, vous pouvez utiliser oncontextmenu, mais attention, il peut être bogué dans IE8. Voir un tableau de compatibilité ici:

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


}
42
MasNotsram

Dans votre gestionnaire, recherchez l’objet window.event pour la propriété ctrlKey en tant que tel:

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

UPDATE: La solution ci-dessus dépend d'un propriété exclusive de l'objet window, sur lequel il ne faudrait peut-être pas compter dans tous les navigateurs. Heureusement, nous avons maintenant un document de travail qui répond à nos besoins et, selon MDN, il est largement soutenu . Exemple:

HTML

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

JS

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

Il en va de même pour les événements de clavier

Voir aussiKeyboardEvent.getModifierState ()

66
Björn Roberg

Étant donné que cette question a été posée pour la première fois il y a plusieurs années, les autres réponses sont obsolètes ou incomplètes.

Voici le code pour une implémentation moderne utilisant jQuery:

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

En ce qui concerne la détection des clics droits, elle a été correctement fournie par un autre utilisateur, mais je vais la lister ici juste pour que tout soit au même endroit.

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

Quand il y a un clic de souris ctrlKey Cet attribut d’événement est accessible sous la forme 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
  }
}

note: https://www.w3schools.com/jsref/event_key_keycode.asp

4
Kranthi Samala

Essaye ça:

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

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

Et le clic droit déclenche un événement contextmenu, donc:

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

javascript pur:

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;
        }
    }
}
0
jazz

Vous ne pouvez pas détecter si une touche est enfoncée après avoir été enfoncée. Vous ne pouvez surveiller les événements clés que dans js. Dans votre cas, je vous suggérerais de changer onclick avec un événement de pression de touche, puis de détecter s'il s'agit de la clé de contrôle clé par événement, puis vous pourrez ajouter votre événement de clic.

0
Deez

Essayez ce code,

$('#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');
   }
});

Désolé, j'ai ajouté e.ctrlKey .

0
Ferhat KOÇER

D'en haut seulement, juste édité pour que ça marche tout de suite

<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>
0
Arun Prasad E S