javascript - JQuery to detect both ctrlKey and mouse click - Stack Overflow

admin管理员组

文章数量:1022695

I'm new to JQuery, so I don't know much of the logic. I'm using it to find out which index of textarea I clicked while holding the CtrlKey. However how do I assign a function on a bination of onclick and a keyboard event.

//What I have tried:
//textarea is the object where I want to detect both ctrlKey and mouse click
$(textarea).keydown(function(event){
    if(event.ctrlKey){
        $(textarea).click(function(event){
            console.log("catched")
        })
    }
})

The above method does work, however It does so thrice, i.e.the console.log occurs thrice, so is there a way to make this catch it once. also it somehow also occurs when not pressing the ctrl key.

I'm new to JQuery, so I don't know much of the logic. I'm using it to find out which index of textarea I clicked while holding the CtrlKey. However how do I assign a function on a bination of onclick and a keyboard event.

//What I have tried:
//textarea is the object where I want to detect both ctrlKey and mouse click
$(textarea).keydown(function(event){
    if(event.ctrlKey){
        $(textarea).click(function(event){
            console.log("catched")
        })
    }
})

The above method does work, however It does so thrice, i.e.the console.log occurs thrice, so is there a way to make this catch it once. also it somehow also occurs when not pressing the ctrl key.

• javascript
• jquery

Share Improve this question Follow edited Feb 17, 2019 at 12:31 Apoqlite asked Feb 17, 2019 at 11:40 ApoqliteApoqlite 28922 silver badges2727 bronze badges 2

• Please share some code, what you tried, etc. – Jeto Commented Feb 17, 2019 at 11:52
• sorry about that – Apoqlite Commented Feb 17, 2019 at 12:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can simply check the ctrlKey property of the mouse event:

$(function() {
  $('textarea').on('click', function (e) {
    if (e.ctrlKey) {
      console.log('clicked with ctrl');
    } else {
      console.log('clicked without ctrl');
    }
  });
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>click me</textarea>

A couple of small mistakes here, but you had the right idea :)

First off, it doesn't really make sense to stack the event handlers the way you have done - I get what you're thinking logically but in reality JS doesn't work that way. What you've actually said is this:

"If the user presses a key down in this textarea, and if their control key is down, add an event listener to this textarea that detects for clicks, and logs catched to the console".

What you really want is this:

$("#txtarea").click((e)=>{
  if (e.ctrlKey) {
    console.log("Control + Click!");
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<textarea id="txtarea"></textarea>

The ctrlKey property is exposed to all events, not just the keypresses.

If it were not though, (say you wanted A + Click), you would have a keydown event which sets global variable aDown to true, a keyup event which sets the aDown variable to false, and a click event which has an if statement in it which only works if aDown is true. This is shown below:

let aDown = false;

$("#txtarea").keydown((e)=>{
  aDown = e.originalEvent.code == "KeyA";
});

$("#txtarea").keyup((e)=>{
  aDown = false;
});

$("#txtarea").click((e)=>{
  if (aDown) {
    console.log("A + Click!");
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Focus the textbox, hold down "A", and then click.<br>
<textarea id="txtarea"></textarea>

Note: On macOS, control + click is a shortcut for right-clicking, so your code won't fire. Consider listening to the oncontextmenu event and dealing with it if you care about macOS support - or perhaps changing your shortcut scheme.

I'd remend setting up a global variable which holds the status of your ctrl key.

var ctrlDown=false;

Instead of simply listening for a keydown event, listen for a keyup event as well and update ctrldown accordingly.

$(textarea).keydown(function(event) {
  if (event.ctrlKey) {
    ctrlDown = true;
  }
});
$(textarea).keyup(function(event) {
  if (event.ctrlKey) {
    ctrlDown = false;
  }
});

Now that you know that the ctrl key is actually pressed you can do a simple check like:

$(textarea).click(function(event) {
  if (ctrlDown) {
    console.log("catched")
  }
});

I'm new to JQuery, so I don't know much of the logic. I'm using it to find out which index of textarea I clicked while holding the CtrlKey. However how do I assign a function on a bination of onclick and a keyboard event.

//What I have tried:
//textarea is the object where I want to detect both ctrlKey and mouse click
$(textarea).keydown(function(event){
    if(event.ctrlKey){
        $(textarea).click(function(event){
            console.log("catched")
        })
    }
})

The above method does work, however It does so thrice, i.e.the console.log occurs thrice, so is there a way to make this catch it once. also it somehow also occurs when not pressing the ctrl key.

I'm new to JQuery, so I don't know much of the logic. I'm using it to find out which index of textarea I clicked while holding the CtrlKey. However how do I assign a function on a bination of onclick and a keyboard event.

//What I have tried:
//textarea is the object where I want to detect both ctrlKey and mouse click
$(textarea).keydown(function(event){
    if(event.ctrlKey){
        $(textarea).click(function(event){
            console.log("catched")
        })
    }
})

The above method does work, however It does so thrice, i.e.the console.log occurs thrice, so is there a way to make this catch it once. also it somehow also occurs when not pressing the ctrl key.

• javascript
• jquery

Share Improve this question Follow edited Feb 17, 2019 at 12:31 Apoqlite asked Feb 17, 2019 at 11:40 ApoqliteApoqlite 28922 silver badges2727 bronze badges 2

• Please share some code, what you tried, etc. – Jeto Commented Feb 17, 2019 at 11:52
• sorry about that – Apoqlite Commented Feb 17, 2019 at 12:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can simply check the ctrlKey property of the mouse event:

$(function() {
  $('textarea').on('click', function (e) {
    if (e.ctrlKey) {
      console.log('clicked with ctrl');
    } else {
      console.log('clicked without ctrl');
    }
  });
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>click me</textarea>

A couple of small mistakes here, but you had the right idea :)

First off, it doesn't really make sense to stack the event handlers the way you have done - I get what you're thinking logically but in reality JS doesn't work that way. What you've actually said is this:

"If the user presses a key down in this textarea, and if their control key is down, add an event listener to this textarea that detects for clicks, and logs catched to the console".

What you really want is this:

$("#txtarea").click((e)=>{
  if (e.ctrlKey) {
    console.log("Control + Click!");
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<textarea id="txtarea"></textarea>

The ctrlKey property is exposed to all events, not just the keypresses.

If it were not though, (say you wanted A + Click), you would have a keydown event which sets global variable aDown to true, a keyup event which sets the aDown variable to false, and a click event which has an if statement in it which only works if aDown is true. This is shown below:

let aDown = false;

$("#txtarea").keydown((e)=>{
  aDown = e.originalEvent.code == "KeyA";
});

$("#txtarea").keyup((e)=>{
  aDown = false;
});

$("#txtarea").click((e)=>{
  if (aDown) {
    console.log("A + Click!");
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Focus the textbox, hold down "A", and then click.<br>
<textarea id="txtarea"></textarea>

Note: On macOS, control + click is a shortcut for right-clicking, so your code won't fire. Consider listening to the oncontextmenu event and dealing with it if you care about macOS support - or perhaps changing your shortcut scheme.

I'd remend setting up a global variable which holds the status of your ctrl key.

var ctrlDown=false;

Instead of simply listening for a keydown event, listen for a keyup event as well and update ctrldown accordingly.

$(textarea).keydown(function(event) {
  if (event.ctrlKey) {
    ctrlDown = true;
  }
});
$(textarea).keyup(function(event) {
  if (event.ctrlKey) {
    ctrlDown = false;
  }
});

Now that you know that the ctrl key is actually pressed you can do a simple check like:

$(textarea).click(function(event) {
  if (ctrlDown) {
    console.log("catched")
  }
});

本文标签： javascriptJQuery to detect both ctrlKey and mouse clickStack Overflow