Question

如何检测下面的按钮当前是否按下（按住）？

<input type="button" value="Hold it down" id="aButton">

澄清一下，我并不是要检测按钮是否被点击，而是按下处于活动状态。

我尝试使用mousedown事件，但如果用户使用键盘操作按钮，选中按钮并按住空格键，则无效。

Answer 1

使用jquery mousedown（本地js中的onmousedown）mouseup（本地js中的onmouseup）事件可以正常工作，如下工作示例：

$(document).ready(function(){
  $("#btn").on("mousedown",function(){
    console.log("btn click down using mouse");
  })
  var firstKeydown = true;
  $("#btn").on("keydown",function(e){
    if(e.which == 32){ // check if clicked button is sapcebar "code =32"
       if(firstKeydown) { // to prevent multiple firing 
          console.log("btn click down using keyboard");
          firstKeydown = false;
       }
    }
  })
  
  $("#btn").on("mouseup",function(){
    console.log("btn click up  using mouse");
  })

  $("#btn").on("keyup",function(e){
     if(e.which == 32) { // check if clicked button is sapcebar "code =32"
       console.log("btn click up using keyboard");
       firstKeydown =true;
     }
  }) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Button</button>

检测输入按钮的状态

1 个答案: