Question

我希望问题的标题符合我在这里要求的内容。

我在HTML＆amp;的javascript：

<button id="Z">Z</button>

var btnZ = document.getElementById("Z");
btnZ.onclick = function() {
// Some code

好的，现在我想在用户按下＆＃34; Z＆＃34;时执行btnZ.onclick功能。在键盘上。如何在不重复btnZ.onclick函数内的代码的情况下执行此操作？

Answer 1

你应该有一个执行代码的公共函数，但是有两个事件函数。

function do() {
     //some code
}
btnZ.onclick = function(e) {
    do();
};
btnZ.onkeydown = function(e) {
    var keyCode = e.keyCode;

    if(keyCode === 90) do();
}

这仅在用户专注于元素时才有效。

Answer 2

使用此：

function clicked () {
    alert('clicked!');
    //some code
}
document.onkeydown = function (e) {
    var keyCode = e.keyCode;
    if(keyCode == 90) {
        clicked();
    }
};
btnZ.onclick = clicked;

Answer 3

如果您可以使用HTML5，则可以使用accesskey attribute（但它会响应ALT + Z，而不是仅响应Z。）

如果您无法使用HTML5，则必须使用keydown事件。

Answer 4

您可以单独声明该功能，只需在任何需要的地方参考。例如，

 var yourOnClickFunction =  function() {
                               // Some code
 btnZ.onclick = yourOnClickFunction;

Answer 5

一种方法是触发其他元素的事件，如below example

所示

<button >Hello</button>
clickButton = function(){
  alert("Hello clicked")
}
document.getElementsByTagName("button")[0].onclick = clickButton

keydown = function(e){
 if(e.keyCode==90)
   document.getElementsByTagName("button")[0].click()
}
document.onkeydown = keydown

如果使用JQuery，您可以使用trigger函数。以下是示例代码，也可以在codepen.io

中找到工作示例

<button >Hello</button>

$("button").click(function(){
  alert("Hello clicked")
})

$(document).keypress(function(e){
  if(e.charCode == 90)
    $("button").trigger("click")
})

Answer 6

<强> HTML

<button id="z">Z</button>

<强> JS

document.onkeypress = function (e) { 
  e = e || window.event; 
  var charCode = e.charCode || e.keyCode, 
      character = String.fromCharCode(charCode); 

  if (character == 'z')
  alert(character);
};

document.getElementById('z').onclick = function (e){
    alert(document.getElementById('z').id)
}

JSFiddle

Javascript如何使用键盘进行onclick功能

6 个答案: