Question

我是JQuery的新手，所以我不太了解逻辑。我正在使用它来查找按住Ctrl键的同时单击了哪个文本区域索引。但是，如何在onclick和键盘事件的组合上分配功能。

//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")
        })
    }
})

上述方法确实有效，但是它可以三次执行，即console.log可以三次执行，因此有一种方法可以使它一次捕获一次。在不按ctrl键的情况下也会发生这种情况。

Answer 1

您可以简单地检查鼠标事件的ctrlKey属性：

$(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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>click me</textarea>

Answer 2

我建议设置一个全局变量，以保存您的ctrl键的状态。

join

不仅监听键按下事件，还监听键按下事件并相应地更新ctrldown。

var ctrlDown=false;

现在您知道实际上已按下了ctrl键，则可以执行以下简单检查：

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

Answer 3

这里有一些小错误，但是您有正确的主意：）

首先，按照您的方式堆叠事件处理程序并没有真正的意义-我理解了您在逻辑上的想法，但实际上JS并非如此。您实际上所说的是：

“如果用户在此文本区域中按下了一个键，并且他们的控制键处于按下状态，则向该文本区域添加一个事件侦听器，以检测是否有点击，并将catched记录到控制台中。”

您真正想要的是：

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

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

ctrlKey属性会暴露于所有事件，而不仅仅是按键。

如果不是，（例如，您想要 A +单击），则将发生一个keydown事件，该事件会将全局变量aDown设置为true ，将keyup变量设置为aDown的{{1}}事件和其中包含false语句的click事件，仅在if为true时有效。如下所示：

aDown

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!");
  }
});

注意：在macOS上， control +单击是右键单击的快捷方式，因此不会触发您的代码。如果您关心macOS的支持，或者考虑更改快捷方式，请考虑听<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Focus the textbox, hold down "A", and then click.<br> <textarea id="txtarea"></textarea>事件并进行处理。

jQuery同时检测ctrlKey和鼠标单击

3 个答案: