javascript - 如何处理鼠标和键盘的点击事件？

Question

我已经做了

1. 一些 html 标签点击事件，它通过鼠标点击和 键盘输入
2. 某些 html 标签的点击事件在以下情况下不起作用 按键盘输入。仅鼠标点击有效。

我需要两者，我们是否以单一方法执行

like: Button, Anchor

“Button **和 Anchor**” - 仅支持标签。

“p,div,span,h1”- 标签不支持 .

Button and Anchor Tag only working both mouse click and keyboard enter !

remaining element are not working tab using keyboard enter why ?

不要说键盘输入的键码方法我需要类似的按钮和 anchor 标记

这是演示:

$(document).ready(function(){
    $("p").click(function(){
        alert("The paragraph was p.");
    });
  
  $("div").click(function(){
        alert("The paragraph was div.");
    });
  
  $("span").click(function(){
        alert("The paragraph was span.");
    });
  
  $("h1").click(function(){
        alert("The paragraph was h1.");
    });
  
  $("button").click(function(){
        alert("The paragraph was button.");
    });
  
    $("a").click(function(){
        alert("The paragraph was a.");
    });
  
});

* {
  margin-bottom:20px;
}

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

<h2>Button and Anchor Tag only working both mouse click and keyboard enter ! </h2>
<h2>remaining element are not working tab using keyboard enter ? </h2>
<br>

<br>
<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
<a href="#"> Click on this anchor </a> 

谢谢 贾亚普拉卡什

Answer 1

您可以使用 keypress event .

To determine which character was entered, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the character code.

function alertTag( tag ){
  alert("The element was " + $(tag).prop("tagName"));
}

$(document).ready(function() {
  $("p, div, span, h1, button, a").click(function(e) {
    alertTag(e.target);
  }).keypress(function(e) {
    if (e.which == 13) {
      e.preventDefault(); // optionally
      alertTag(e.target);
    }
  });
});

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

<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
<a href="#"> Click on this anchor </a>

如果你想对所有元素使用相同的方法(虽然我不明白这样做的意义)你需要包括 e.preventDefault() .否则，当按下 enter 时，您将同时触发 click和 keypress事件。

另一种方法是强制 p , div , span和 h1元素触发 click按下 enter 时的事件:

$(document).ready(function() {
  $("p, div, span, h1, button, a").click(function(e) {
    alert("The element was " + $(e.target).prop("tagName"));
  });
  
  $("p, div, span, h1").keypress(function(e) {
    if (e.which == 13) {
      $(e.target).trigger('click');
    }
  });
});

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

<p tabindex="0">Click on this paragraph.</p>
<div tabindex="0">Click on this div.</div>
<span tabindex="0">Click on this span.</span>
<h1 tabindex="0">Click on this h1.</h1>
<button> Click on this button.</button> <br>
<a href="#"> Click on this anchor </a>

如果您真的想为 所有 HTML 标记执行此操作(即使我认为这不是一个好主意)，您可以执行以下操作。

$("body *").keypress(function(e) {
  if (e.which == 13) {
    $(e.target).trigger('click');
  }
});

然后，所有元素都会对 enter 使用react，就像它们对点击使用react一样。但是你真的应该尝试替换 body *选择器只涵盖您想要的元素。例如，您可以添加类 .enterTriggersClick到目标元素然后做:

$(".enterTriggersClick").keypress(function(e) { ...